/***** Styling *****/

.mid { width: 100%; position: relative; overflow: hidden; padding: 0; padding-bottom: 5%; }

.mid .whiz-img { display: flex; flex-direction: column; align-items: center; }
.mid .whiz-img img { margin: 0 auto !important; width: 65vw; height: auto; }

.mid .contact-info { background-image: radial-gradient(#6e7176 0%, #2d3238 100%); border: none; border-radius: 15px; padding: 5%; }

.mid section { box-sizing: border-box; position: relative;  overflow: hidden; width: 100%; padding: 5% 10% 5% 10%; display: flex; flex-direction: column; align-items: center; justify-content: center; height:auto}
.mid section:first-child { box-sizing: border-box; position: relative;  overflow: hidden; width: 100%; padding: 15% 10% 5% 10%; display: flex; flex-direction: column; align-items: center; justify-content: center; height:auto}

.mid .div1 { width: 65%; text-align: center; margin-left: auto; margin-right: auto; }
.mid .div1.container, .mid .div1.container h2 { text-align: left;}
.mid .padding{margin-top:5%}

/***** Breadcrumbs *****/

.mid .breadcrumb { background-color: transparent; margin-bottom: 20px; margin-top: 20px; text-align:center}
.mid .breadcrumb ul { padding: 0; margin: 0; }
.mid .breadcrumb ul li { display: inline-block; font-size: 16px; color: #b71c87; text-align:left; font-size:12px}
.mid .breadcrumb ul li:before { content: '/'; padding: 0 10px; color: #fff; }
.mid .breadcrumb ul li:first-child:before { content: ''; padding: 0; }

/***** Grids and Flexboxes *****/

.mid .wrapper1 { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 5%; grid-row-gap: 5%; align-items: baseline}
.mid .wrapper2 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 5%; align-items: baseline}

.mid .flexbox { display: flex; flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; width: 100%; justify-content: center}
.mid .flex-item { flex-basis: 45%; }
.flex-item+.flex-item{margin-left: 10%}
.mid .flexbox iframe { position: relative; width: 100%; height:100%; border-radius: 15px }

.mid .system .flex-item {margin-top: 0}
.mid .system .flexbox {padding-bottom: 5%; padding-top: 5%}

.mid .mega-title h3 { font-size: 5rem; font-weight:normal}

.mid .implementation img { width:350px; margin-top: 10%}

/*Reusable parts*/
.mid .module { margin-bottom: 2em; background: rgba(255,255,255,1); color: rgba(37,40,42,1); float: left; width: 100%; height: 100%; box-shadow: 0 5px 20px rgba(0,0,0,.5); border-radius: 15px; display: inline-block; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -khtml-border-radius: 15px;}
.mid .module [class*='col-'] .inner { padding: 2em 0; }

/*Responsive Table & Accordion Styles*/
.mid .table { margin-top: 20px !important; border-radius: 15px; display: inline-block; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -khtml-border-radius: 15px; }

.mid .tabular-data { overflow: hidden; position: relative; }

.mid .data-inactive { color: rgba(120,120,120,1); background: rgba(230,230,230,1); padding: 1.5em; float: left; width: 100%; }
.mid .data-header { font-weight: bold; text-transform: uppercase; color: r.gba(85,91,96,.5); padding: 1.5em; }
.mid .data-group { border-bottom: 1px solid rgba(220,220,220,1); }
.mid .data-group:last-child { border: none; }
.mid .data-group .data-expands, .mid .data-group .expandable { will-change: max-height, padding, opacity, background; transition: ease max-height .5s, ease padding .5s, ease opacity .5s, ease background .5s; }
.mid .data-group .data-expands { cursor: pointer; padding: 1.5em; float: left; width: 100%; }
.mid .data-group .expandable { transform-origin: top; padding: 0 1.5em; max-height: 0; overflow: hidden; opacity: 0; }
.mid .data-group .expandable:last-child { border-bottom-left-radius: 15px; border-bottom-right-radius: 15px }
.mid .data-group .expandable hr { margin: 1em 0; border: 1px solid white; }
.mid .data-group .expandable p { color: #000; padding-left: 10px }

.mid .row-open { background: rgba(240,240,240,1); opacity: 1 !important; }
.mid .row-open { max-height: 1200px !important; padding: 1.5em !important; }
.mid .row-toggle { position: relative; cursor: pointer; float: right; display: block; top: -10px; right: 5px; font-size: 2em; transition: ease transform .5s; transform-origin: center; line-height: 1; font-weight: bold;}
.mid .row-toggle .horizontal, .mid .row-toggle .vertical { position: absolute; top: 50%; left: 50%; margin-left: -8px; content: " "; width: 16px; height: 2px; background: rgba(120,120,120,1); transition: ease transform .5s; transform-origin: center; }
.mid .row-toggle .vertical { transform: rotate(90deg); }

.mid .row-toggle-twist, .mid .row-toggle-twist .vertical { transform: rotate(180deg); }


/***** Resources Content Cards *****/

.container {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.card {
    width: 30%;
    overflow: hidden;
    border-radius: 15px;
    background: white;
    margin-bottom: 50px;
    transition: all .2s;
    box-shadow: 5px 5px 15px rgba(0,0,0, .3);

}

    .card:hover {
        box-shadow: 5px 5px 25px rgba(0,0,0, .5);
        transform: translateY(-5px);
    }

        .card:hover .icon svg, .card:hover .icon img {
            animation: iconjln 1s;
        }

.img-cover {
    position: relative;
}

.card img {
    width: 100%;
    height: 50%;
    object-fit: cover;
}

.icon {
    position: absolute;
    top: 0;
    padding: 25px;
    right: 0;
    border-bottom-left-radius: 20px;
    backdrop-filter: blur(20px);
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.desc {
    padding: 1.5em;
    height: max-content;
}

    .desc h2, .row h2 {
        font-size: 20px
    }


    .desc p {
        margin-bottom: 20px;
        width: 100%;
        height: 50px;
        overflow: visible;
        color: black;
        text-align: center
    }

.tdesc {
    margin-bottom: 40px;
    width: 100%;
    height: 50px;
    overflow: auto;
}

@keyframes iconjln {
    0%, 100% {
        opacity: 1;
        transform: translateX(0%);
    }

    50% {
        opacity: 0;
        transform: translateX(100%);
    }

    70% {
        opacity: 0;
        transform: translateX(-100%);
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .mid .div1 { width: 100%; }
    .mid .whiz-img img { width: 80vw; }
    .mid .wrapper1 { grid-template-columns: 1fr 1fr; grid-column-gap: 5%; grid-row-gap: 2.5%; }
    .card {width:45%}
}

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

    .mid section:first-child { padding: 25% 10% 5% 10%; !important}
    
    .mid .whiz-img img { width: 80vw; }
    .mid .slick-slide img { margin: 0 auto; }

    .mid .div1 { width: 100%; }
    .mid .wrapper1 { display: block; text-align: center }
    .mid .wrapper2 { grid-template-columns: 1fr; grid-column-gap: 10px; }
    .mid .implementation img { width:100%}
    .mid .implementation section { padding: 5% 5% 5% 5% !important}

    .mid .flex-item { flex-basis: 100%; max-width:100% }
    .mid .flex-item2 { flex-basis: 30%; }
    .flex-item+.flex-item{ margin-top: 10%; margin-left: 0}

    .card {width:100%}

    .mid .mega-title { text-align:center}

    .mid .implementation img { margin-top: 15%}

    .mid .flexbox iframe { height:300px }    
    
    .data-group .title {
        display: inline-block;
        padding-bottom: 1em;
    }
}
@media screen and (max-width: 480px) {
    .desc h2, .row h2 { font-size: 15px }
    }
}