/* #### Generated By: http://www.unim.de for Lazuli App #### */

/* helper*/
/* dont forget about flexbox */
.ratiobox {
    position: relative;
    width: 100%;
    /* desired width */
}

.ratiobox:before {
    content: "";
    display: block;
    padding-top: 100%;
    /* initial ratio of 1:1*/
}

.ratiobox .ratiobox_content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.ratio4_1:before {
    padding-top: 25%;
}

.ratio2_1:before {
    padding-top: 50%;
}

.ratio1_2:before {
    padding-top: 200%;
}

.ratio4_3:before {
    padding-top: 75%;
}

.ratio16_9:before {
    padding-top: 56.25%;
}



/*Unimatix  better way for aspect-ratio boxes */
[style*="--aspect-ratio"] > :first-child {
    width: 100%;
}

[style*="--aspect-ratio"] > img {
    height: auto;
}

@supports (--custom:property) {
    [style*="--aspect-ratio"] {
        position: relative;
    }

    [style*="--aspect-ratio"]::before {
        content: "";
        display: block;
        padding-bottom: calc(100% / (var(--aspect-ratio)));
    }

    [style*="--aspect-ratio"] > :first-child {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        text-align: center;
    }
}




/* allgemein */
.primary_color_orange {
    color: rgb(255, 153, 9);
    /* #ff9900; */
}

.primary_color_blue {
    color: rgb(41, 104, 176);
    /*  #2968b0; */
}

a,
a:active,
a:hover {
    color: black;
    text-decoration: none;
    outline: none;
}



a:focus {
    -moz-outline-style: none;
    outline: none
}

#support a,
#support a:active,
support a:hover {
	color: black;
    text-decoration: underline;
    outline: none;
	font-weight:bold;
}

#support a:focus {
    -moz-outline-style: none;
    outline: none
}

body {
    /*    overflow:hidden;*/
    line-height: 1.4;
}

h1 {
    letter-spacing: 0.01em;
}

h2 {
    letter-spacing: 0.01em;
    font-weight: 600;
    font-size: 1.5em;
}

h3 {
    letter-spacing: 0.01em;
    font-size: 1.5em;
    text-align: center;
}

h4 {}
h5 { font-size: 1.2em; }
h6 {}

section {

    /*max-height: 100%;*/
    overflow: hidden;
}

/* leftrightcontent */
.leftrightcontent {
    text-align: justify;
}

.leftrightcontent .leftside {
    padding-bottom: 50px;
}

.leftrightcontent .leftside h1,
.leftrightcontent .leftside h2,
.leftrightcontent .leftside h3,
.leftrightcontent .leftside h4,
.leftrightcontent .leftside h5,
.leftrightcontent .leftside h6 {
    text-align: right;
}

.leftrightcontent .leftside img {
    float: right;
    /*max-height:200px;*/
}

.leftrightcontent .rightside {
    padding-bottom: 50px;
}

.leftrightcontent .rightside img {
    float: left;
    /*max-height:200px;*/
}


@media (min-width: 768px) {
    .leftrightcontent .leftside img {
        float: left;
    }

    .leftrightcontent .rightside img {
        float: right;
    }
}

/* apple download button*/
.apple_download_btn {
    min-height: 80px;
    height: 80px;
    max-width: 100%;
}

/* windows download button*/
.windows_download_btn {
    width: 280px;
    max-width: 100%;
}


/* elements */
/* navbar*/
.blueshadow {
    /*
    -webkit-box-shadow: 0px 0px 18px 5px rgba(41,104,176,1);
    -moz-box-shadow: 0px 0px 18px 5px rgba(41,104,176,1);
    box-shadow: 0px 0px 18px 5px rgba(41,104,176,1);
*/
}

.blueshadow_submenu {
    /*
    -webkit-box-shadow: 0px 5px 15px 3px rgba(41,104,176,0.6);
    -moz-box-shadow: 0px 5px 15px 3px rgba(41,104,176,0.6);
    box-shadow: 0px 5px 15px 3px rgba(41,104,176,0.6);
*/
    /*
    -webkit-box-shadow: 0px 5px 15px 3px rgba(128,128,128,0.6);
    -moz-box-shadow: 0px 5px 15px 3px rgba(128,128,128,0.6);
    box-shadow: 0px 5px 15px 3px rgba(128,128,128,0.6);
*/

}


/* navbar */
#menu-y .dropdown-toggle:after {
    content: none
}



@media (min-width: 1800px) {
    #menu-y .navbar-logo {
        background-image: url("../images/logo-lazuli-362x128.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 150px;
        height: 50px;
    }
}

@media (min-width: 1400px) and (max-width: 1799px) {
    #menu-y .navbar-logo {
        background-image: url("../images/logo-lazuli-362x128.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 150px;
        height: 50px;
    }
}

@media (min-width: 992px) and (max-width: 1399px) {
   #menu-y .navbar-logo {
        background-image: url("../images/logo-lazuli-362x128.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 80px;
        height: 50px;
    }

}

@media (max-width: 991px) {
    #menu-y .navbar-logo {
        background-image: url("../images/logo-lazuli-362x128.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 60px;
        height: 50px;
    }
}

/*
.nav-item .btn-primary-outline{
    margin:5px 0px;
    padding:5px 15px;
    letter-spacing: normal;
}
@media (min-width: 992px) {
    .nav-item .btn-primary-outline{
        margin:5px;
    }
}
*/


#menu-y {
    /*    z-index:100;*/
}

#menu-y .navbar {
    /*    box-shadow: 4px 5px 5px rgba(0, 0, 0,.1);*/
    /*             box-shadow: 0px 3px 3px rgba(0,0,0,.1),inset 0px 0px 50px rgba(41, 104, 176,.1);*/
    box-shadow: 0px 3px 3px rgba(0, 0, 0, .1), inset 0px 15px 15px -15px rgba(41, 104, 176, .05), inset 0px -15px 15px -15px rgba(41, 104, 176, .05);
    background-color: rgba(255, 255, 255, .9);
    z-index: 100;
}

#menu-y li {
    padding: 0px 5px;
    transition: all 0.3s;
}

#menu-y .link {
    font-size: 1.2em;
    transition: all 0.3s;
}

#menu-y .navbar-short .link {
    font-size: 1.3em;
}

#menu-y .navbar-nav .dropdown-menu {
    border: none;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
    padding: 5px;
}

#menu-y .navbar-dropdown .mbr-table-cell {
    transition: height 0.5s;
}


#menu-y a.nav-link.link {
    border-radius: 0px;
}

#menu-y li:hover {
    background-color: rgba(255, 153, 9, 1);
    box-shadow: 1px 1px 1px rgb(220, 220, 220);
}

#menu-y li:first-child {
    border-radius: 1rem 1rem 0rem 0rem;
}

#menu-y li:last-child {
    border-radius: 0rem 0rem 1rem 1rem;
}

@media (min-width: 992px) {

    #menu-y li:first-child {
        border-radius: 1rem 0rem 0rem 1rem;
    }

    #menu-y li:last-child {
        border-radius: 0rem 1rem 1rem 0rem;
    }
}

/*#menu-y .link:hover,*/
#menu-y .dropdown-item:hover,
/*#menu-y .link:focus,*/
#menu-y .dropdown-item:focus {
    color: white;
    background-color: rgba(255, 153, 9, 1);
}

#menu-y .link[aria-expanded="true"],
#menu-y .dropdown-menu {
    color: white;
    /*  background: rgba(11,50,162,0.96);*/
    /*    background: rgba(255,255,255,0.96);*/
}


/*
@media (min-width: 768px) {
    .navbar .container{
        max-width:none;
    }
}
@media (min-width: 992px) {
    .navbar .container{
        max-width:940px;
    }
}
@media (min-width: 1200px) {
    .navbar .container{
        max-width:1140px;
    }
}
*/



/* head*/
#extHeader6-4l {
    /*    padding: 0px 0px;*/
    padding: 100px 0px;
}


/* drei leading text boxes*/
.index_lead_boxes div {
    background-color: white;
    -webkit-box-shadow: 0px 0px 14px 16px rgba(255, 255, 255, 1);
    -moz-box-shadow: 0px 0px 14px 16px rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 14px 16px rgba(255, 255, 255, 1);
    margin-bottom: 60px;
    text-align: left;
}

/* wowslider index */
#wowslider-6p {
    padding: 100px 0px;
    font-family: 'Roboto, sans-serif;

}

.mbr-wowslider .ws_images {
    border-radius: 15px;
    overflow: hidden !important;
}

.mbr-section-background {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f0f9ff+0,ffffff+15,ffffff+85,f0f9ff+100 */
    /*
    background: #f0f9ff; 
    background: -moz-linear-gradient(left,  #f0f9ff 0%, #ffffff 15%, #ffffff 85%, #f0f9ff 100%);
    background: -webkit-linear-gradient(left,  #f0f9ff 0%,#ffffff 15%,#ffffff 85%,#f0f9ff 100%); 
    background: linear-gradient(to right,  #f0f9ff 0%,#ffffff 15%,#ffffff 85%,#f0f9ff 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#f0f9ff',GradientType=1 ); 
*/
}

/* spielspaß */
#msg-box3-3c {
    padding: 100px 0px;



}


#msg-box3-3c .mbr-cards-row {
    border-spacing: 1.2rem .4rem;
}

#msg-box3-3c .mbr-card-border {
    height: 100%;
    margin: 5px;
    /*box-shadow: 5px 5px 5px rgb(230, 230, 230);*/
    background-color: rgba(250, 250, 250, 0.8);
    border-radius: 2rem;
}

#msg-box3-3c .mbr-cards-col {
    /*    box-shadow: 5px 5px 5px rgb(230, 230, 230);*/
    /*    background-color: rgba(250, 250, 250, 0.8);*/
    border-radius: 2rem;
    transition: all 0.3s ease-in-out;

}

#msg-box3-3c .mbr-cards-col:hover {
    /*
    color: white;
    background-color: rgba(255, 153, 9, 1);
    box-shadow: 1px 1px 1px rgb(230, 230, 230);
*/
}

#msg-box3-3c .mbr-cards-col:hover .card-title,
#msg-box3-3c .mbr-cards-col:hover .card-text {
    /*    color: white;*/
}

#msg-box3-3c .card-img-top {
    max-width: 80%;
}

#msg-box3-3c .card-block {
    padding: 1rem;
}

#msg-box3-3c .card-text {
    /*    text-align:start;*/
}



#allLazuliMatheApps,
#allLazuliLernwoerterApps,
#allLazuliLogikApps {
   /* padding: 100px 0px;*/

}


#allLazuliMatheApps .mbr-cards-row,
#allLazuliLernwoerterApps .mbr-cards-row,
#allLazuliLogikApps .mbr-cards-row {
    border-spacing: 1.2rem .4rem;
}


#allLazuliMatheApps .mbr-cards-col,
#allLazuliLogikApps .mbr-cards-col,
#allLazuliLernwoerterApps .mbr-cards-col {

    transition: all 0.3s ease-in-out;
    padding-top: 5px;

}

#allLazuliMatheApps .mbr-card-border,
#allLazuliLogikApps .mbr-card-border,
#allLazuliLernwoerterApps .mbr-card-border {
    height: 100%;
    margin: 5px;
    box-shadow: 5px 5px 5px rgb(230, 230, 230);
    background-color: rgba(250, 250, 250, 0.8);
    border-radius: 2rem;
}

#allLazuliMatheApps .mbr-card-border:hover,
#allLazuliLogikApps .mbr-card-border:hover,
#allLazuliLernwoerterApps .mbr-card-border:hover {
    color: white;
    background-color: rgba(255, 153, 9, 1);
    box-shadow: 1px 1px 1px rgb(230, 230, 230);
}

#allLazuliMatheApps .mbr-card-border:hover .card-title,
#allLazuliMatheApps .mbr-card-border:hover .card-text,
#allLazuliLogikApps .mbr-card-border:hover .card-title,
#allLazuliLogikApps .mbr-card-border:hover .card-text,
#allLazuliLernwoerterApps .mbr-card-border:hover .card-title,
#allLazuliLernwoerterApps .mbr-card-border:hover .card-text {
    color: white;
}

#allLazuliMatheApps .card,
#allLazuliLogikApps .card,
#allLazuliLernwoerterApps .card {
    padding: 20px 5px 0 5px;
}

#allLazuliMatheApps .card-img-top,
#allLazuliLogikApps .card-img-top,
#allLazuliLernwoerterApps .card-img-top {
    max-width: 100%;
    border-radius: 1rem;
}

#allLazuliMatheApps .card-block,
#allLazuliLogikApps .card-block,
#allLazuliLernwoerterApps .card-block {
    /*padding: 0 0 80px 0;*/
}

#allLazuliMatheApps .card-block .extendedInfo,
#allLazuliLogikApps .card-block .extendedInfo,
#allLazuliLernwoerterApps .card-block  .extendedInfo{
    display:none;
}
.extendedInfo #allLazuliMatheApps .card-block .extendedInfo,
.extendedInfo #allLazuliLernwoerterApps .card-block  .extendedInfo{
    display:block;
}

#allLazuliMatheApps .card-footer,
#allLazuliLogikApps .card-footer,
#allLazuliLernwoerterApps .card-footer {

    text-align: center;
    padding: 0 10px 0 0;
    position: absolute;
    display: block;
    width: 90%;
    background-color: transparent;
    border-top: none;
    bottom: 0px;
    height: 120px;
    margin: 5%;
}

#allLazuliMatheApps .card-footer > div,
#allLazuliLogikApps .card-footer > div,
#allLazuliLernwoerterApps .card-footer > div {
    background-color: rgba(250, 250, 250, 0.99);
    height: 120px;
    padding-top: 15px;
    border-radius: 2rem;
}





.allLazuliMatheApps,
.allLazuliLogikApps,
.allLazuliLernwoerterApps {
    /*padding: 80px 0px;*/

}


.allLazuliMatheApps .mbr-cards-row,
.allLazuliLogikApps .mbr-cards-row,
.allLazuliLernwoerterApps .mbr-cards-row {
    border-spacing: 1.2rem .4rem;
}


.allLazuliMatheApps .mbr-cards-col,
.allLazuliLogikApps .mbr-cards-col,
.allLazuliLernwoerterApps .mbr-cards-col {

    transition: all 0.3s ease-in-out;
    padding-top: 5px;

}

.allLazuliMatheApps .mbr-card-border,
.allLazuliLogikApps .mbr-card-border,
.allLazuliLernwoerterApps .mbr-card-border {
    height: 100%;
    margin: 0px 5px 0px 5px;
    /*box-shadow: 5px 5px 5px rgb(230, 230, 230);*/
    box-shadow:5px 5px 15px rgb(200, 200, 200);
    background-color: rgba(250, 250, 250, 0.8);
    border-radius: 2rem;
}

.allLazuliMatheApps .mbr-card-border:hover,
.allLazuliLogikApps .mbr-card-border:hover,
.allLazuliLernwoerterApps .mbr-card-border:hover {
   /* color: white;*/
    /*background-color: rgba(255, 153, 9, 1);*/
   /* box-shadow: 1px 1px 1px rgb(230, 230, 230);*/
}

.allLazuliMatheApps .mbr-card-border:hover .card-title,
.allLazuliMatheApps .mbr-card-border:hover .card-text,
.allLazuliLogikApps .mbr-card-border:hover .card-title,
.allLazuliLogikApps .mbr-card-border:hover .card-text,
.allLazuliLernwoerterApps .mbr-card-border:hover .card-title,
.allLazuliLernwoerterApps .mbr-card-border:hover .card-text {
    /*color: white;*/
}

.allLazuliMatheApps .card,
.allLazuliLogikApps .card,
.allLazuliLernwoerterApps .card {
    /*padding: 5px 5px 0 5px;*/
    margin:0px !important;
    padding-top:10px !important;
}

.allLazuliMatheApps .card-img-top,
.allLazuliLogikApps .card-img-top,
.allLazuliLernwoerterApps .card-img-top {
    max-width: 100%;
    max-height: 100%;
    border-radius: 1rem;
}

.allLazuliMatheApps .card-block,
.allLazuliLogikApps .card-block,
.allLazuliLernwoerterApps .card-block {
    /*padding: 0 0 80px 0;*/
}

.allLazuliMatheApps .card-footer,
.allLazuliLogikApps .card-footer,
.allLazuliLernwoerterApps .card-footer {

    text-align: center;
    padding: 0 10px 0 0;
    position: absolute;
    display: block;
    width: 90%;
    background-color: transparent;
    border-top: none;
    bottom: 0px;
    height: 120px;
    margin: 5%;
}

.allLazuliMatheApps .card-footer > div,
.allLazuliLogikApps .card-footer > div,
.allLazuliLernwoerterApps .card-footer > div {
    background-color: rgba(250, 250, 250, 0.99);
    height: 120px;
    padding-top: 15px;
    border-radius: 2rem;
}


.allLazuliMatheApps .card-btns,
.allLazuliLogikApps .card-btns,
.allLazuliLernwoerterApps .card-btns {
    padding: 3px 0px 0px 0px;
    display: block;
    background-color: transparent;
    border-top: none;
}


.allLazuliMatheApps .card-btns > div,
.allLazuliLogikApps .card-btns > div,
.allLazuliLernwoerterApps .card-btns > div {
    background-color: rgba(250, 250, 250, 0.99);
    border-radius: 1.5rem;
    /*padding: 5px 0px 0px 0px;*/
}

.allLazuliMatheApps .card-btns .card-text,
.allLazuliLogikApps .card-btns .card-text,
.allLazuliLernwoerterApps .card-btns .card-text {
    text-align: center;
}



@media (min-width: 1200px)
{
    .inderpresse{
        background-image: url(../images/hintergruende/Bild_3_Viecher_mitte.jpg);
    }
}

@media (max-width: 1200px)
{
    .inderpresse{
        background-image: url(../images/hintergruende/Bild_3_Viecher_mitte_small.jpg);
    }
}
#inderpresse .mbr-cards-row,
#allLazuliLernwoerterApps .mbr-cards-row {
    border-spacing: 1.2rem .4rem;
}


#inderpresse .mbr-cards-col,
#allLazuliLernwoerterApps .mbr-cards-col {
    /*
    box-shadow: 5px 5px 5px rgb(240, 240, 240);
    background-color: rgba(250, 250, 250, 0.8);
    border-radius: 2rem;
*/
    padding-top: 0px;
    transition: all 0.3s ease-in-out;
}

/*
#inderpresse .mbr-cards-col:hover {
    color: white;
    background-color: rgba(255, 153, 9, 1);
}

#inderpresse .mbr-cards-col:hover .card-title,
#inderpresse .mbr-cards-col:hover .card-text {
    color: white;
}
*/

#inderpresse .card-img-top {
    max-width: 30%;
}

#inderpresse .mbr-card-border {
    height: 100%;
    margin: 5px;
    padding-top: 10px;
    box-shadow: 5px 5px 5px rgb(230, 230, 230);
    background-color: rgba(250, 250, 250, 0.8);
    border-radius: 2rem;
}

#inderpresse .mbr-card-border:hover {
    color: white;
    background-color: rgba(255, 153, 9, 1);
    box-shadow: 1px 1px 1px rgb(230, 230, 230);
}

#inderpresse .mbr-card-border:hover .card-title,
#inderpresse .mbr-card-border:hover .card-text {
    color: white;
}




#lazuliwoerterfacts .mbr-cards-row {
    border-spacing: 1.2rem .4rem;
}


#lazuliwoerterfacts .mbr-cards-col {
    /*
    box-shadow: 5px 5px 5px rgb(240, 240, 240);
    background-color: rgba(250, 250, 250, 0.8);
    border-radius: 2rem;
*/
    padding-top: 0px;
    transition: all 0.3s ease-in-out;
}

/*
#lazuliwoerterfacts .mbr-cards-col:hover {
    color: white;
    background-color: rgba(255, 153, 9, 1);
}

#lazuliwoerterfacts .mbr-cards-col:hover .card-title,
#lazuliwoerterfacts .mbr-cards-col:hover .card-text {
    color: white;
}
*/

#lazuliwoerterfacts .card-img-top {
    max-width: 100%;
    margin-top: 50px;

}

#lazuliwoerterfacts .mbr-card-border {
    height: 100%;
    max-width: 380px;
    margin: 5px;
    padding-top: 10px;
    box-shadow: 5px 5px 5px rgb(230, 230, 230);
    background-color: rgba(250, 250, 250, .8);
    border-radius: 2rem;
}

#lazuliwoerterfacts .mbr-card-border:hover {
    color: white;
    background-color: rgba(255, 153, 9, 1);
    box-shadow: 1px 1px 1px rgb(230, 230, 230);
}

#lazuliwoerterfacts .mbr-card-border:hover .card-title,
#lazuliwoerterfacts .mbr-card-border:hover .card-text {
    color: white;
}


.salOverlay {

    -webkit-filter: none;
    filter: none;
    transition: .5s filter ease-in-out, .5s -webkit-filter ease-in-out;

}

.salOverlay.sal-animate {
    -webkit-filter: none;
    filter: none;
    transition: .5s filter ease-in-out, .5s -webkit-filter ease-in-out;
}

.salOverlay.filterEffect {
    -webkit-filter: blur(10px) opacity(0.5) saturate(0.0);
    filter: blur(10px) opacity(0.5) saturate(0.0);
    transition: .5s filter ease-in-out, .5s -webkit-filter ease-in-out;
}

/* download*/
#download {
    padding: 100px 0px 20px 0px;
}

.aquarellBG,
.navbar-toggleable-sm.in {
    /*
    background-image:  linear-gradient(90deg, rgba(0,29,98,0.45) 0%,rgba(1,146,231,0.45) 100%), url("../images/hintergruende/aquarell-hg-endlos.jpg");
    background-repeat: repeat, repeat;
    background-size: cover, auto;
*/
    background-color: white;
}


.aquarellBG_nav {
    /*
    background-image:  linear-gradient(120deg, rgba(0,55,148,0.45) 0%,rgba(1,146,231,0.45) 100%), url("../images/hintergruende/aquarell-kopfzeile.jpg");
    background-repeat: no-repeat;
    background-size: cover;
*/
    background-color: white;
}

.BG_nav {
    /*
    background-image:  linear-gradient(120deg, rgba(0,55,148,0.45) 0%,rgba(1,146,231,0.45) 100%), url("../images/hintergruende/aquarell-kopfzeile.jpg");
    background-repeat: no-repeat;
    background-size: cover;
*/
    background-color: white;
}

.aquarellBG_navsub {
    /*
    background-image:  linear-gradient(120deg, rgba(0,55,148,0.45) 0%,rgba(1,146,231,0.45) 100%), url("../images/hintergruende/aquarell-hg-endlos.jpg");
    background-repeat: repeat;
    background-size: cover, auto;
*/
    background-color: white;
}

/* cards block*/
/*.mbr-cards .card-text {
    
    font-size:      1.07rem;
    padding:        20px 0px;
    height:         170px;
}*/
@media (min-width: 1800px) {
    .mbr-cards .card-text {
        font-family: 'Source Sans Pro', 'Source Sans 3', sans-serif;
        font-size: 1.0rem;
        padding: 5px 0px;
    }
}

@media (min-width: 1400px) and (max-width: 1799px) {
    .mbr-cards .card-text {
        font-family: 'Source Sans Pro', 'Source Sans 3', sans-serif;
        font-size: 1.0rem;
        padding: 5x 0px;
    }
}

@media (min-width: 992px) and (max-width: 1399px) {
    .mbr-cards .card-text {
        font-family: 'Source Sans Pro', 'Source Sans 3', sans-serif;
        font-size: 1.0rem;
        padding: 5px 0px;
    }
}

@media (max-width: 991px) {
    .mbr-cards .card-text {
        font-family: 'Source Sans Pro', 'Source Sans 3', sans-serif;
        font-size: 1.0rem;
        padding: 5px 0px 0px 0px;
    }
}

/* Pro App 15kniffelige ..*/
#msg-box3-4w {
    font-family: 'Source Sans Pro', 'Source Sans 3', sans-serif;
padding: 20px 0px 60px 0px;
}

/* FramelessVideo */

.FramelessVideo {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 0;
    padding-bottom: 56%;
    box-shadow: 6px 6px 5px rgb(200,200,200);
}

.FramelessVideo video,
.FramelessVideo iframe {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    top: 0;
    left: 0;
}

/* FramelessDualVideo */
.FramelessDualVideo {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 0;
    padding-bottom: 56%;
    box-shadow: 6px 6px 5px rgb(200,200,200);
}

.FramelessDualVideo video,
.FramelessDualVideo iframe {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    top: 0;
    left: 0;
}


/* iPadVideo*/
#trailer {
    font-family: 'Source Sans Pro', 'Source Sans 3', sans-serif;
    /*    padding:        6vw 0px 6vw 0px;*/
    font-weight: 700;

}

.iPadVideo {
    position: relative;
    background-image: url("../images/iPad_Air_2_H_Slvr_sRGB.png");
    background-repeat: no-repeat;
    background-size: contain;
    /* xs */
    width: 320px;
    height: 238px;
    margin: 0 auto;
}

.iPadVideo video,
.iPadVideo iframe {
    position: absolute;
    overflow: hidden;
    /* xs */
    width: 232px;
    height: 174px;
    left: 44px;
    top: 32px;
    border-radius: 5px;
}

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .iPadVideo {
        width: 750px;
        height: 557px;
        margin: 0;
    }

    .iPadVideo video,
    .iPadVideo iframe {
        position: absolute;
        width: 543px;
        height: 407px;
        left: 104px;
        top: 73px;
        border-radius: 5px;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .iPadVideo {
        width: 900px;
        height: 668px;
        margin: 0;
    }

    .iPadVideo video,
    .iPadVideo iframe {
        position: absolute;
        width: 652px;
        height: 489px;
        left: 124px;
        top: 90px;
        border-radius: 5px;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .iPadVideo {
        width: 1100px;
        height: 817px;
        margin: 0;

    }

    .iPadVideo video,
    .iPadVideo iframe {
        position: absolute;
        width: 800px;
        height: 600px;
        left: 150px;
        top: 108px;
        border-radius: 5px;
    }
}

#msg-box3-4u {
    padding-top: 0px;
    padding-bottom: 60px;
}






/* lernen mit Lazuli*/


#extFeatures10-7i,
#auswertung-content {
    padding: 100px 0px;
}



/* jquery ui accordion */
.ui-icon.accordionOpen {
    background: url("../images/accordionOpen.png") no-repeat;
    background-size: 20px;
    min-width: 20px;
    min-height: 20px;
    padding-left: 20px;
    background-position: left center;
    float: right;
    margin: 15px;
}

.ui-icon.accordionClose {
    background: url("../images/accordionClose.png") no-repeat;
    background-size: 20px;
    min-width: 20px;
    min-height: 20px;
    padding-left: 20px;
    background-position: left center;
    float: right;
    margin: 15px;
}

#accordion_A,
#accordion_B {
    width: 100%;
}

.accordion .ui-accordion-header {
    color: rgb(255, 153, 9);
    background-color: rgb(229, 238, 249);
    font-size: 1.25rem;
    border-radius: 1rem 1rem 0rem 0rem;
    box-shadow: 5px 5px 3px rgb(220, 220, 220);
}

.accordion .ui-accordion-header div {
    float: left;
    margin: 10px;
}

.accordion .ui-accordion-header img {
    float: left;
    margin: 10px;
    max-height: 90px;
    border-radius: .5rem;

}

.accordion .ui-accordion-content {
    padding: 10px;
    color: #000;
    font-family: 'Roboto', sans-serif;
font-size: 20px;
    box-shadow: 5px 5px 3px rgb(220, 220, 220);
    background-color: white;
    min-height: 210px;
}

.accordion .ui-accordion-content img.content_img {
    /*    float: right;*/
    margin: 10px;
    height: 200px;
    border-radius: 1rem;
}

.accordion .ui-accordion-header-active {
    color: white;
    background-color: rgba(255, 153, 9, 1);

    /*    background-color: rgba(0, 0, 0, 0.1);*/
    border-radius: 1rem 1rem 0rem 0rem;
    margin-bottom: 0px;
}

.accordion .ui-accordion-content-active {
    /*    background-color: rgba(0, 0, 0, 0.1);*/
    border-radius: 0rem 0rem 1rem 1rem;
    margin-bottom: 10px;
}

@media (max-width: 991px) {
    .accordion > .ui-accordion-header > img {
        display: none;
    }

    .accordion > .ui-accordion-header {
        height: auto;
        /*        background-color: rgba(0, 0, 0, 0.2);*/
        /*        color: rgb(255, 153, 9);*/
        display: table;
        width: 100%;
        margin-top: 10px;
        /*        border-radius: 1rem 1rem 0rem 0rem;*/
        transition: all 0.5s;
        /*        font-size: 1.5rem*/
    }

    .accordion > .ui-accordion-header > div {
        width: calc(100% - 70px);
    }
}

@media (min-width: 992px) {
    .accordion > .ui-accordion-header > img {
        display: inline-block;
    }

    .accordion > .ui-accordion-header {
        /*        background-color: rgba(0, 0, 0, 0.2);*/
        height: 100px;
        /*        color: rgb(255, 153, 9);*/
        display: table;
        width: 100%;
        margin-top: 10px;
        /*        border-radius: 15px;*/
        transition: all 0.5s;
        /*        font-size: 1.75rem;*/
    }
}

/* kompetenzen */
.msg-box3-6b {
    font-family: 'Roboto', sans-serif;
color: #2969b0;
    text-align: center;
    font-size: 20px;
}

.msg-box3-6b .lead {
    font-size: 20px;
    font-weight: 700;
    margin: 50px 0px;

    background-color: rgba(255, 255, 255, 0.8);
    -webkit-box-shadow: 0px 0px 14px 16px rgba(255, 255, 255, 0.8);
    -moz-box-shadow: 0px 0px 14px 16px rgba(255, 255, 255, 0.8);
    box-shadow: 0px 0px 14px 16px rgba(255, 255, 255, 0.8);
    margin: 30px 0px;

    color: rgb(41, 104, 176);
}


#extFeatures11-7p .mbr-section-text-gray.lead.title {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    /*font-family: 'Roboto, sans-serif;*/
    font-family: 'Roboto', sans-serif;
line-height: 25.65px;
    text-transform: none;
    letter-spacing: 0.01em;
    word-spacing: 0;
    text-align: justify;
}

#extFeatures11-7p .mbr-section-text-gray.lead {
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
line-height: 25.65px;
    text-transform: none;
    letter-spacing: 0.01em;
    word-spacing: 0;
    text-align: justify;
}

.mbr-wowslider-container--balance .mbr-wowslider .ws-title span {
    opacity: 1.0;
    background-color: rgba(255, 153, 9, 0.75);
}




@media (min-width: 1800px) {
    .mbr-cards .card-title {
        padding-top:0rem !important;
    }
}

@media (min-width: 1400px) and (max-width: 1799px) {
    .mbr-cards .card-title {
        padding-top:0rem !important;
    }
}

@media (min-width: 992px) and (max-width: 1399px) {
    .mbr-cards .card-title {
        padding-top:0rem !important;
        margin-bottom: 0px !important;
    }
}

@media (max-width: 991px) {
    .mbr-cards .card-title {
        padding-top:0rem !important;
        margin-bottom: 0px !important;
    }
}


.mbr-cards .card-title a {
    color: rgb(255, 153, 9);
    text-decoration: none;
}

.mbr-cards .card-title,
#download .mbr-cards-col:nth-child(n) .card-title {
    color: rgb(255, 153, 9);
}

#download .mbr-cards-col:nth-child(n) .card-subtitle {
    color: #fff;
}

/*.mbr-section {
    padding-top: 100px;
}
*/
.mbr-section-full {
    /*height:104vh;*/
    /*    padding-top: 8rem;*/
        height: auto;
}

.extFeatures10 h4 {
    font-size: 24.9px;
}




.mbr-section-subtitle {
    font-size: 1.25rem;
    font-weight: 400;
}


.btn {
    font-size: 0.8rem;
}


@media (min-width: 544px) {
    .mbr-section {
        padding-top: 50px;
    }
    .mbr-wowslider-container--balance .mbr-wowslider .ws-title div {
        letter-spacing: 0;
        font-size: 1.45rem;
        opacity: 1;
        background-color: rgba(41, 104, 176, 0.8);
    }

    .btn {
        font-size: 0.8rem;
    }
    .btn.mehrinfo {
        font-size: 0.8rem;
    }
}

@media (min-width: 768px) {
    .mbr-section {
        padding-top: 50px;
    }
    .mbr-wowslider-container--balance .mbr-wowslider .ws-title div {
        letter-spacing: 0;
        font-size: 1.35rem;
        opacity: 1;
        background-color: rgba(41, 104, 176, 0.8);
    }

    .btn {
        font-size: 0.8rem;
    }
    .btn.mehrinfo {
        font-size: 0.8rem;
    }
}

@media (min-width: 992px) {
    .mbr-section {
    padding-top: 80px;
    }   
    .mbr-wowslider-container--balance .mbr-wowslider .ws-title div {
        letter-spacing: 0;
        font-size: 1.3rem;
        opacity: 1;
        background-color: rgba(41, 104, 176, 0.8);
    }

    .btn {
        font-size: 1.0rem;
    }
    .btn.mehrinfo {
        font-size: 0.8rem;
    }
}

@media (min-width: 1200px) {
    .mbr-section {
        padding-top: 100px;
    }
    .mbr-wowslider-container--balance .mbr-wowslider .ws-title div {
        letter-spacing: 0;
        font-size: 1.25rem;
        opacity: 1;
        background-color: rgba(41, 104, 176, 0.8);
    }

    .btn {
        font-size: 1.07rem;
    }
    .btn.mehrinfo {
        font-size: 0.9rem;
    }
   
}


.btn.download{
        /*padding: .275rem .35rem !important;*/
    }

.btn.mehrinfo {
        padding: .275rem .35rem !important;
        border-radius: 0.7em;
        font-weight: 600;
    }

.btn.download.btn-primary-outline {
        box-shadow: 5px 5px 3px rgb(220,220,220) !important;
        /*box-shadow: none !important;*/
    }

.btn.mehrinfo.btn-primary-outline {
        box-shadow: 2px 2px 3px rgb(220,220,220) !important;
        /*box-shadow: none !important;*/
    }
.btn.download.btn-primary-outline.disabled {
        background-color: rgba(250,250,250,0.8);
        /*box-shadow: none !important;*/
    }

.btn.mehrinfo.btn-primary-outline.disabled {
        background-color: rgba(250,250,250,0.8);
        /*box-shadow: none !important;*/
    }


.laz_card_lernspiele {
    color: black;
    font-size: 1.07rem;
    line-height: 1.5;
}

.laz_card_lernspiele ul li {
    float: initial;
    display: list-item;
}

.leftrightcontent div.leftright_big {
    padding-bottom: 6rem;
}

@media (min-width: 768px) {
    .leftrightcontent div.leftright_big img {
        display: block;
        max-height: 100%;
        width: auto;
    }
}

@media (max-width: 767px) {
    .leftrightcontent div.leftright_big img {
        display: block;
        max-width: 100%;
        height: auto;
    }
}

.extFeatures14 h4 {
    letter-spacing: 0;
}

.credits h1 {
    margin-bottom: 0;
}

.credits p {
    font-size: 20px;
}

/*.credits p.1st-para { }*/
.credits p.second-para {
    margin-top: 2.5rem;
}

.leftrightcontent > .row > a {
    position: relative;
    display: block;
    top: -100px;
    display: hidden;
}

.card.cart-block > .card-block > p {
    font-size: 1.07rem;
}

.card.cart-block > .card-block > a {
    display: block;
    margin-bottom: 2rem;
}

#lml-sec-2 .lead {
    font-size: 1.25rem;
    color: #2969b0;
    font-weight: 700;
}

#lml-sec-2 .lead + div .btn {
    margin-top: 2.3125rem;
}

#contacts1-3w .sitemap > ul {
    width: 100%;
}

#contacts1-3w .sitemap ul li {
    /*padding-bottom: 0;*/
}

.mbr-footer-content > p {
    left: 0;
    display: inline-block;
    position: relative;
}

@media (min-width: 768px) {
    .mbr-footer-content > p {
        left: 50%;
        transform: translate(-50%, 0);
        display: inline-block;
        position: relative;
    }
}

.mbr-footer-content li::before,
.mbr-footer .mbr-contacts li::before {
    content: none;
}

.mbr-footer-content li li::before,
.mbr-footer .mbr-contacts li li::before {
    background: #c0a375;
    content: "";
    height: 0.36em;
    left: 0;
    margin-top: -0.18em;
    position: absolute;
    top: 50%;
    width: 0.36em;
}

.navbar-brand {
    vertical-align: middle;
}

.navbar-brand .navbar-label {
    font-size: 1.5rem;
    transition: all 0.5s;
    font-family: 'Sources Sans Pro', sans-serif;
    text-decoration: none;
    color: white;
    font-weight: 700;
    display: inline-block;
    transform: translate(0, 25%);
}

.navbar-brand .navbar-label:hover {
    color: #ff9900;
}

.card-btn .release-date {
    text-shadow: 2px 2px 2px #000;
    font-size: 1.75rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

.card-btn .btn {
    padding: 20px;
}

ul.privacy-policy > li {
    padding-bottom: 2rem;
}

.textshadow_white {
    text-shadow: 0px 0px 25px rgba(255, 255, 255, 1), 0px 0px 25px rgba(255, 255, 255, 1), 0px 0px 25px rgba(255, 255, 255, 1), 0px 0px 25px rgba(255, 255, 255, 1), 0px 0px 25px rgba(255, 255, 255, 1), 0px 0px 25px rgba(255, 255, 255, 1), 0px 0px 10px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1);
}

.reflogos {
    min-height: 50px;
    max-height: 100px;
    min-width: 300px;
    max-width: 300px;
    margin: auto;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    background-position: center;
}

blockquote a:link,
blockquote a:visited,
blockquote a:active,
blockquote a:hover {
    text-decoration: none;
}


.playbutton {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("../images/yt_playbutton.png") center center no-repeat;
    background-size: 20%;
    min-height: 200px;
}


.aH_16_9 {
    padding-top: 56.25%;
    /* 16:9 Aspect Ratio */
    position: relative;
    /* If you want text inside of it */
}

.aH_16_9 > * {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.aH_16_9 img,
.aH_16_9 iframe {
    border-radius: 1rem;


}

ul.lazulibullets {
    list-style: none;
    list-style-image: url(../images/bulletpoint.png);
}

ul.lazulibullets li {
    margin-bottom: 10px;
}

.lazulibullet {
    width: 16px;
    height: 16px;
    display: block;
    background: url(../images/bulletpoint.png);
}

/*
ul.lazulibullets li{
    position:relative;
            padding:0 10px 0 10px;

}
ul.lazulibullets li:before {
        content: ' ';
        padding:0 10px 0 0;
        position:absolute;
        width: 20px;
        height: 20px;
        background: url(../images/bulletpoint.png) no-repeat 0px 0px;
    }*/
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/*
.text-justify {
    text-align: justify;
}
*/

.mbr-card {
    border: none;
    border-radius: 0;
    padding: .5em;
}

.mbr-card .mbr-iconfont {
    font-size: 8em;
    color: rgb(128, 128, 128);
}

.mbr-card .card-title {
    color: rgb(255, 153, 9);
    font-size: 1em;
    text-align: left;
}

.mbr-card .card-text {
    text-align: left;
}

.navbar .btn {
    border-radius: 1em;
    padding: .2rem .4rem;
}

.mbr-section-text {
    padding: 3.33%;
}


/* .col-sm- */
@media (min-width: 544px) {
    .container {
        max-width: 500px;
    }
}

/* .col-md- */
@media (min-width: 768px) {
    .container {
        /*        max-width:720px;*/
        max-width: 700px;
    }
}

/*    .col-lg- */
@media (min-width: 992px) {
    .container {
        /*        max-width:940px;*/
        max-width: 800px;
    }
}

/* .col-xl- */
@media (min-width: 1200px) {
    .container {
        /*        max-width:1140px;*/
        max-width: 1100px;
    }
}


.sidemenulist {
    text-align: left;
    list-style-type: none;
    list-style-position: inside;
    padding-left: 0px;
    color: black;
    line-height: 1.5rem;
    font-weight: 400;
}

.sidemenulist li {
    box-shadow: 3px 3px 3px rgb(220, 220, 220);
    /*    background-color: rgba(240, 240, 240, 1);*/
    border-radius: 1rem;
    padding-left: 1rem;
    margin: 0 0 10px 0;
    transition: all .3s ease-in-out;
}

.sidemenulist li:hover {
    color: white;
    background-color: rgba(255, 153, 9, 1);
    box-shadow: 1px 1px 1px rgb(220, 220, 220);
}

.sidemenulist li:hover a {
    color: white;

}


.mbr-iconfont {
    font-weight: normal !important;
}

#lerninhalte .mbr-iconfont {
    font-size: 5rem;
}

.laz_card_lernspiele li {
    margin-bottom: .8rem;
}

.laz_card_lernspiele a {

    padding: .2rem .6rem .2rem .6rem;
    line-height: 1.5rem;
    /*    text-align: center;*/
    color: black;
    box-shadow: 3px 3px 3px rgb(220, 220, 220);
    /*    background-color: rgba(240, 240, 240,1);*/
    border-radius: 1rem;
    transition: all .3s ease-in-out;
}

.laz_card_lernspiele a:hover {
    color: white;
    background-color: rgba(255, 153, 9, 1);
    box-shadow: 1px 1px 1px rgb(220, 220, 220);
}



a.btn-inline {
    margin-bottom: .8rem;
}

a.btn-inline {

    padding: .2rem .6rem .2rem .6rem;
    line-height: 1.5rem;
    /*    text-align: center;*/
    color: black;
    box-shadow: 3px 3px 3px rgb(220, 220, 220);
    /*    background-color: rgba(240, 240, 240,1);*/
    border-radius: 1rem;
    transition: all .3s ease-in-out;
}

a.btn-inline:hover {
    color: white;
    background-color: rgba(255, 153, 9, 1);
    box-shadow: 1px 1px 1px rgb(220, 220, 220);
}



/* default  accordion theme */

.accordion {}

.accordion .card {

    border: none;

}

.accordion .card-header {
    /*              box-shadow: 3px 3px 3px rgb(220, 220, 220);*/
    /*    padding: 0rem 1rem 1rem 1rem;*/
    padding: 0;
    margin: 0;
    border: none;
    background-color: transparent;
    border-radius: 1.25rem 1.25rem 0 0;
}

.accordion .card-body {
    box-shadow: 5px 5px 3px rgb(220, 220, 220);
    border-radius: 0rem 0rem 1rem 1rem;
    padding: 1rem 2rem;
    margin: 0 4% 1rem 0;
    background-color: white;
}


.inline-bullets {
    display: inline;
    margin: 0px 2px 5px 0px;
    width: 15px;
    height: 15px;
}




.mbr-section-video {
    padding: 4rem 3rem;
}

.mbr-section-video-frameless {
    padding: 5rem 4rem;
}

.mbr-section-text.lead p,
.text-bg-white {
    /*    margin: 5px;*/
    box-shadow: 0px 0px 80px 81px rgba(255, 255, 255, .8);
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 1rem;
}

#extFeatures10-7i P.lernen,
#auswertung-content p.lernen {
    color: rgb(41, 104, 176);
}


.mbr-parallax-background {}

.section-shadow {
    /*    box-shadow: 0px 3px 3px rgba(0,0,0,.1), 0px -10px 50px rgba(255,255,255,1);*/
    /*        box-shadow: 0px 3px 3px rgba(0,0,0,.1);*/
    /*    box-shadow: 0px 3px 3px rgba(0,0,0,.1),inset 0px 0px -50px rgba(41, 104, 176,.1),inset 0px 0px 50px  rgba(41, 104, 176,.1);*/
    /*   box-shadow: 0px 3px 3px rgba(0,0,0,.1),inset 0px 50px 50px -50px rgba(41, 104, 176,.1),inset 0px -50px 50px -50px rgba(41, 104, 176,.1);*/
    box-shadow: 0px 3px 3px rgba(0, 0, 0, .1), inset 0px 15px 15px -15px rgba(41, 104, 176, .05), inset 0px -15px 15px -15px rgba(41, 104, 176, .05);


    z-index: 50;
}


#index_logo {
    /*    height:20rem;*/
    margin-bottom: 1rem;
}

#index_logo > div {

    position: relative;
    width: 45%;
    margin: 0 auto;
    background-image: url("../images/Logo-solo-fein-800.png"), url("../images/lazuli_fehlerLG.gif");
    background-size: contain, 55%;
    background-position: bottom center, top center;
    background-repeat: no-repeat, no-repeat;
        height:100%;
        max-height: 100%;
}

#index_logo img {
    height: 75%;
}


#sidemenu-logo {
    font-size: 100px;
    width: 140px;
    position: relative;
}

#sidemenu-logo .sidemenu-logo-pic {
    position: absolute;
    width: 140px;
    top: -40px;
    left: 0px;
}

#sidemenu-logo .sidemenu-logo-text {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    margin-bottom: 10%;
}


#footer {
  /*  z-index: 0;

    background-image: url("../images/hintergruende/footer.jpg");
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;*/


}

#paedagogischerHintergrund {

    background-image: url("../images/hintergruende/lazuli_woerter_Bild_3.jpg");
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /*
background: #e5eef9; 
background: -moz-linear-gradient(top,  #e5eef9 0%, #ffffff 47%); 
background: -webkit-linear-gradient(top,  #e5eef9 0%,#ffffff 47%); 
background: linear-gradient(to bottom,  #e5eef9 0%,#ffffff 47%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5eef9', endColorstr='#ffffff',GradientType=0 ); 
*/

}

#foo {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fffcfc+0,f0f0f0+36,e3eef9+100 */
    background: #fffcfc;
    /* Old browsers */
    background: -moz-linear-gradient(top, #fffcfc 0%, #f0f0f0 36%, #e3eef9 100%);
    background: -webkit-linear-gradient(top, #fffcfc 0%, #f0f0f0 36%, #e3eef9 100%);
    background: linear-gradient(to bottom, #fffcfc 0%, #f0f0f0 36%, #e3eef9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcfc', endColorstr='#e3eef9', GradientType=0);
}



#funlinemedia .bg-image {
    top: 0px;
    left: 0px;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("../images/logo-funline_media_x1000.png");
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 50%;
    -webkit-filter: blur(2px) opacity(0.07) saturate(0.8);
    filter: blur(2px) opacity(0.07) saturate(0.8);
}



.awards {
    padding: 2px !important;
}



/*  custom flipcard */
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    /*  background-color: transparent;*/
    width: 100%;
    max-width: 350px;
    height: 400px;
    /*  border: 1px solid #f1f1f1;*/
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 1.5s;
    transition-delay: .2s;
    transform-style: preserve-3d;
}

.flip-card-inner h3 {
    min-height: 75px;
    padding: 5px;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
    /*  position: absolute;*/
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 1rem;
    padding: 0rem 1rem;
    transition: opacity .25s linear;
    transition-delay: .25s;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    /*      position: relative;
    */
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    color: black;
    opacity: 1.0;
}

.flip-card-back {
    opacity: 0.0;
}

.flip-card-front .card-text {
    color: black !important;
}

.flipped .flip-card-front {
    opacity: 0.0;
}

.flipped .flip-card-back {
    opacity: 1.0;
}


.flip-card-front-BG {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transition: .5s filter ease-in-out, .5s -webkit-filter ease-in-out;
    transform: rotateY(180deg);
    z-index: -1;
    padding: 0rem 1rem;
    background-color: white;
    border-radius: 1rem;
    width:100%;
}

.flip-card-back-BG {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: -1;
    padding: 0rem 1rem;
    background-color: white;
    border-radius: 1rem;
}

.flip-card-front-BG img {
    -webkit-filter: blur(10px) opacity(0.2) saturate(0.0);
    filter: blur(3px) opacity(0.2) saturate(0.5);
}

.flip-card-back-BG img {}

/* Style the back side */
.flip-card-back {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    color: white;
    transform: rotateY(180deg);
}



/* main page card-img-top-lazuli */
.card-img-top-lazuli
{
    border-radius: calc(1rem -4px);
    border-radius: 20%;
width: auto;
max-width: 100%;
margin: 0 auto;
display: inline-block;
}


.comingsoon
{
      background-image: url("../images/comingsoon.webp");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      display: block;
      opacity: 0.4;
}