@font-face {
    font-family: 'AleckCdBold';
    src: url('https://d1yfqobqq7euu8.cloudfront.net/fonts/WarnerMedia_WEB/ATTAleckCd-Bold.woff') format('woff');
}

@font-face {
    font-family: 'AleckSansRegular';
    src: url('https://d1yfqobqq7euu8.cloudfront.net/fonts/WarnerMedia_WEB/ATTAleckSans-Regular.woff');
}

@font-face {
    font-family: 'AleckSansMedium';
    src: url('https://d1yfqobqq7euu8.cloudfront.net/fonts/WarnerMedia_WEB/ATTAleckSans-Medium.woff');
}



        * {
            box-sizing: border-box;
        }

        body {
            background-color: #1e1e1e;
            -moz-osx-font-smoothing: grayscale;
            font-size: 24px;
            line-height: 1.25;
            font-family: Arial, Helvetica, sans-serif;
        }

        h1 {
            font-family: 'AleckCdBold', sans-serif;
            font-size: 70px;
            line-height: 1;
            letter-spacing: 0;
            text-transform: uppercase;
        }

        h1.overline {
            font-family: 'AleckCdBold';
            text-transform: uppercase;
            padding-top: 20px;
            font-size: 50px;
            line-height: 1;
            letter-spacing: 0;
            margin-bottom: 16px;
            position: relative;
        }

        h1.overline::before {
            background-color: transparent;
            content: "";
            height: 10px;
            left: 0;
            position: absolute;
            top: 0;
            width: 80px;
            background-image: url('headline-cap.png');
            background-size: contain;
        }

        p {
            font-family: 'AleckSansRegular';
        }

        /* Hero */

        #prod-learning-hero-container {
            width: 100%;
            min-height: 600px;
            background: url('https://prodlearning.warnermedia.com/assets/Hero-Image-3.png');
            background-color: #1e1e1e;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
        }

        .prod-learning-hero-inner {
            flex: 0 0 65%;
            background: transparent;
            margin: 50px;
        }

        @media screen and (max-width: 340px) {
            .prod-learning-hero-inner {
                flex: 0 0 100%;
            }
        }

        /* Main Container */

        #prod-learning-main-container {
            width: 95%;
            min-height: 600px;
            margin: 50px auto;
            padding: 40px;
            background-color: #ffffff;
        }

        /* Main Cards */

        #card-container {
            width: 100%;
            margin: 100px auto;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: center;
        }

        .card {
            flex: 0 1 calc(30% - 30px);
            min-height: 300px;
            border: 1px solid #dedede;
            border-radius: 8px;
            margin: 0 30px;
            transition: all .3s ease;
        }

        .card:hover {
            transform: translateY(-10px);
            cursor: pointer;
            -webkit-box-shadow: 0px 5px 15px -5px #777777;
            box-shadow: 0px 5px 15px -5px #777777;
        }

        @media screen and (max-width: 1100px) {
            .card {
                flex: 0 0 100%;
                margin: 30px 0;
            }
        }

        .card-header {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            background: rgb(89,45,175);
            background: linear-gradient(90deg, rgba(89,45,175,1) 0%, rgba(135,10,202,1) 40%, rgba(168,70,204,1) 70%, rgba(233,36,233,1) 100%);
            height: 25px;
        }

        .card-body {
            padding: 15px;
        }

        .card-body p {
            font-family: 'AleckSansRegular';
            font-size: 16px;
            letter-spacing: 0.2px;
            line-height: 24px;
        }

        .card-body h3 {
            font-family: 'AleckSansMedium';
            margin-bottom: 3px;
            margin-top: 0;
            font-size: 20px;
            line-height: 1.2;       
        }

        /* Footer */

        #footer {
            padding-top: 100px;
            padding-bottom: 100px;
            padding-left: 44px;
            padding-right: 44px;
            color: #858585;
            font-family: 'AleckSansRegular';
            font-size: 14px;
            text-align: center;
            -moz-osx-font-smoothing: initial;
        }

        /* Media Logos */

        #media-logo-container {
            padding-bottom: 150px;
        }

        #media-logo-container svg {
            opacity: .2;
        }

        ul.media-logos {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
            padding: 0;
            position: relative;
            max-width: 1100px;
            margin: 0 auto;
            z-index: 1;
        }

        ul.media-logos li {
            display: block;
            height: auto;
            flex-grow: inherit;
            list-style-type: none;
            margin: 20px;
        }

        /* Font Colors */

        .white-text {
            color: #ffffff;
        }