/* Extracted from Views/Media/Index.cshtml @section styles */

body {
    background: url('/images/mediabg2.png');
    /* Center and scale the image nicely */
    background-position: top left;
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-color: #000 !important;
}


.mediam {
    position: fixed;
    bottom: 7%;
    left: 38%;
    display: inline-block;
    width: 900px;
}

.logo{display:none;}
.logo2{margin-left:40px;}
.logo3{margin-left: 40px;}

/* Mobile: the desktop row is a fixed 900px-wide box positioned at left:38%,
   which pushes the last icon off the right edge of a phone screen. Below
   768px, drop the fixed width and stack the three icons vertically instead,
   centered on the page. */
@media (max-width: 767.98px) {
    .mediam {
        left: 0;
        right: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .logo2,
    .logo3 {
        margin-left: 0;
    }
}

/* Extracted from inline <style> inside the "Animation" SVG icon (logo1) */

.st0 {
    fill: #000;
}

.st20 {
    fill: #fff;
}

/* Extracted from inline <style> inside the "Lecture Video" SVG icon (logo2) */

.st20 {
    fill: #FFFFFF;
}

/* Extracted from inline <style> inside the "Lecture Voice" SVG icon (logo3) */

.st20 {
    fill: #FFFFFF;
}