/* 
    * Gallery
    */
    
    /* Filter */
    #on-demand-gallery .filter-topic select {
        padding: 10px 60px 10px 10px;
        text-decoration: none;
        border: 1px solid #CCCCCC;
        width: 100%;
        margin-left: 0;
        background-image: url(/SiteElements/Images/Base/Internal/CTA-icons/Colour/bgarrow-dark-grey-down.png);
        background-size: 18px auto;
        background-position: right 15px top 50%;
        background-repeat: no-repeat;

        /* Remove default arrow */
        -moz-appearance: none;
        -webkit-appearance: none;
    }
    /* Remove default arrow */
    #on-demand-gallery .filter-topic select::-ms-expand {
        display: none;
    }

    /* Video Card */
    #on-demand-gallery #videoCards .video-card {
        -webkit-box-shadow: 0 0 4px #C6C6C6;
        -moz-box-shadow: 0 0 4px #C6C6C6;
        box-shadow: 0 0 4px #C6C6C6;

    }
    #on-demand-gallery #videoCards .video-card .thumbnail {
        height: 175px;
        object-fit: cover;
        width: 100%;
    }

    #on-demand-gallery #videoCards .video-card .card-body p {
        color: black;
        margin-bottom: 0px;
    }

    #on-demand-gallery.blue #videoCards .video-card .card-body .mini-lecture-title {
        font-size: 18px;
        color: #10263b;
    }
    #on-demand-gallery.black #videoCards .video-card .card-body .mini-lecture-title {
        font-size: 18px;
        color: black;
    }

    /* CTA */
    #on-demand-gallery #videoCards .video-card .video-cta {
        background-image: url("/siteelements/images/base/internal/cta-icons/white/bg-icon-white-right-arrow.png");
        display: block;
        text-decoration: none;
        color: white;
        text-align: left;
        padding: 10px 40px 10px 8px;
        background-size: 18px auto;
        background-position: right 10px top 50%;
        background-repeat: no-repeat;
        width: 150px;
    }
    #on-demand-gallery.blue #videoCards .video-card .video-cta {
        background-color: #10263b;
        border: 2px solid #10263b;
    }
    #on-demand-gallery.black #videoCards .video-card .video-cta {
        background-color: black;
        border: 2px solid black;
    }

    #on-demand-gallery #videoCards .video-card .video-cta:hover {
        background-color: white;
    }
    #on-demand-gallery.blue #videoCards .video-card .video-cta:hover {
        background-image: url(/siteelements/images/base/internal/cta-icons/colour/bg-icon-blue5-right-arrow.png);
        color: #10263b;
    }
    #on-demand-gallery.black #videoCards .video-card .video-cta:hover {
        background-image: url(/siteelements/images/base/internal/cta-icons/colour/bg-icon-black-right-arrow.png);
        color: black;
    }

    /* No video results */
    .no-video-results {
        margin-top: 20px;
    }
    .no-video-results h5 {
        text-align: center;
    }
    #on-demand-gallery.blue .no-video-results h5 {
        color: #10263b;
    }
    #on-demand-gallery.black .no-video-results h5 {
        color: black;
    }

    /* Pagination */
    #on-demand-gallery .pagination-video {
        text-align: center;
    }
    #on-demand-gallery .pagination-video ul {
        list-style-type: none;
        padding-left: 0px;
    }
    #on-demand-gallery .pagination-video ul li {
        float: left;
        padding: 14px 14px;
        position: relative;
        margin: 0 4px 10px 4px; 
    }
    #on-demand-gallery.blue .pagination-video ul li {
        border: 2px solid #10263b;
        list-style: none;
    }
    #on-demand-gallery.black .pagination-video ul li {
        border: 2px solid black;
    }

    #on-demand-gallery .pagination-video ul li a {
        position: absolute;
        color: black;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-decoration: none;
    }

    /* Selected Page */
    #on-demand-gallery.blue .pagination-video ul .selected {
        background-color: #10263b;
    }
    #on-demand-gallery.black .pagination-video ul .selected {
        background-color: black;
    }
    #on-demand-gallery .pagination-video ul .selected a {
        color: white;
    }
    #on-demand-gallery .pagination-video ul .selected:hover {
        background-color: white;
        color: black;
    }


    /* 
    * Video Page
    */
    .blue .title h1 {
        font-size: 2rem;
        font-family: 'Circular', sarif;
        color: #10263b;
    }
    .black .title h1 {
        font-size: 2rem;
        font-family: 'Vesterbro', sarif;
    }

    .videoBlock {
        width: 100%;
        padding-top: 56.25%;
        position: relative;
    }
    .row .videoBlock .sys_video {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

    .sys_video{position:relative;}
    .sys_video-thumbnail{position:absolute; top: 0; bottom: 0; left: 0; right: 0; background-size: cover;}
    .sys_video-play {z-index: 100;position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
    .sys_video-play:hover {cursor: pointer;}
    .sys_video-text{position:absolute; margin: auto auto; bottom: 0; right: 0; top: 0; text-align:right; width: 42%; color: #18194f;}
    .sys_video-text .sys_video-title{display:none; color: #18194f; text-align:right; font-size: 1.4em; line-height: 1.2em;}
    .sys_video:hover .sys_video-button{border-color: #fff; background-color: transparent; background-image: url("/ugstudy/clearing/2017/images/decorative/bg-playbutton-white.png"); }
    .sys_video-button { border: 2px solid transparent; position: absolute; right: 0; bottom: 0; top: 0; left: 0; margin: auto auto;width: 170px; height: 70px; text-align: right; }
    .blue .sys_video-button {
        background: #10263b url("/ugstudy/clearing/2017/images/decorative/bg-playbutton-white.png") no-repeat; 
    }
    .black .sys_video-button {
        background: black url("/ugstudy/clearing/2017/images/decorative/bg-playbutton-white.png") no-repeat; 
    }
    .sys_video-button .playCaption {float: right;background-color: #fff;width: 100px;height: 70px;margin: -2px;line-height: 70px;text-align: center;color:#18194f;}

    .videoShare{
        display: inline-block;
        width:25%;
        text-align: right;
    }
    .videoShare a:link {
        text-decoration: none;
    }
    .videoSocial {
        display: inline-block;
    }
    .resp-sharing-button__link,
    .resp-sharing-button__icon {
        display: inline-block
    }
    .resp-sharing-button__link {
        text-decoration: none;
        color: #fff;
        margin: 4px 0;
    }
    .resp-sharing-button {
        border-radius: 5px;
        transition: 25ms ease-out;
        padding: 0.5em 0.75em;
        font-family: Helvetica Neue,Helvetica,Arial,sans-serif
    }
    .resp-sharing-button__icon svg {
        width: 1em;
        height: 1em;
        margin-right: 0.4em;
        vertical-align: top
    }
    .resp-sharing-button--small svg {
        margin: 0;
        vertical-align: middle
    }
    /* Non solid icons get a stroke */
    .resp-sharing-button__icon {
        stroke: #fff;
        fill: none
    }
    /* Solid icons get a fill */
    .resp-sharing-button__icon--solid,
    .resp-sharing-button__icon--solidcircle {
        fill: #fff;
        stroke: none
    }
    .resp-sharing-button--twitter { background-color: #55acee; }
    .resp-sharing-button--twitter:hover { background-color: #2795e9; }
    .resp-sharing-button--pinterest { background-color: #bd081c; }
    .resp-sharing-button--pinterest:hover { background-color: #8c0615; }
    .resp-sharing-button--facebook { background-color: #3b5998; }
    .resp-sharing-button--facebook:hover { background-color: #2d4373; }
    .resp-sharing-button--tumblr { background-color: #35465C; }
    .resp-sharing-button--tumblr:hover { background-color: #222d3c; }
    .resp-sharing-button--reddit { background-color: #5f99cf; }
    .resp-sharing-button--reddit:hover { background-color: #3a80c1; }
    .resp-sharing-button--google { background-color: #dd4b39; }
    .resp-sharing-button--google:hover { background-color: #c23321; }
    .resp-sharing-button--linkedin { background-color: #0077b5; }
    .resp-sharing-button--linkedin:hover { background-color: #046293; }
    .resp-sharing-button--email { background-color: #777; }
    .resp-sharing-button--email:hover { background-color: #5e5e5e; }
    .resp-sharing-button--xing { background-color: #1a7576; }
    .resp-sharing-button--xing:hover { background-color: #114c4c; }
    .resp-sharing-button--whatsapp { background-color: #25D366; }
    .resp-sharing-button--whatsapp:hover { background-color: #1da851; }
    .resp-sharing-button--hackernews { background-color: #FF6600; }
    .resp-sharing-button--hackernews:hover, .resp-sharing-button--hackernews:focus {   background-color: #FB6200; }
    .resp-sharing-button--vk { background-color: #507299; }
    .resp-sharing-button--vk:hover { background-color: #43648c; }

    .blue .resp-sharing-button--facebook { background-color: #10263b; border-color: #10263b; }
    .black .resp-sharing-button--facebook { background-color: black; border-color: black; }
    .resp-sharing-button--facebook:hover,
    .resp-sharing-button--facebook:active { background-color: #2d4373; border-color: #2d4373;}

    .blue .resp-sharing-button--twitter { background-color: #10263b; border-color: #10263b; }
    .black .resp-sharing-button--twitter { background-color: black; border-color: black; }
    .resp-sharing-button--twitter:hover,
    .resp-sharing-button--twitter:active { background-color: #2795e9; border-color: #2795e9; }

    .blue .resp-sharing-button--email { background-color: #10263b; border-color: #10263b; }
    .black .resp-sharing-button--email { background-color: black; border-color: black; }
    .resp-sharing-button--email:hover,
    .resp-sharing-button--email:active { background-color: #5e5e5e; border-color: #5e5e5e; }

    .blue .resp-sharing-button--pinterest { background-color: #10263b; border-color: #10263b; }
    .black .resp-sharing-button--pinterest { background-color: black; border-color: black; }
    .resp-sharing-button--pinterest:hover,
    .resp-sharing-button--pinterest:active { background-color: #8c0615; border-color: #8c0615; }

    .blue .resp-sharing-button--linkedin { background-color: #10263b; border-color: #10263b; }
    .black .resp-sharing-button--linkedin { background-color: black; border-color: black; }
    .resp-sharing-button--linkedin:hover,
    .resp-sharing-button--linkedin:active { background-color: #046293; border-color: #046293; }

    .blue .resp-sharing-button--whatsapp { background-color: #10263b; border-color: #10263b;}
    .black .resp-sharing-button--whatsapp { background-color: black; border-color: black;}
    .resp-sharing-button--whatsapp:hover,
    .resp-sharing-button--whatsapp:active { background-color: #1DA851; border-color: #1DA851; }

    /* Share video */
    .videoShare {
        text-align: left;
    }
    .videoShare a {
        color: black;
    }

    /* Video Detail */
    .video-detail {
        color: black;
    }
    .blue .video-detail h2.videoTitle {
        color: #10263b;
    }
    .black .video-detail h2.videoTitle {
        color: black;
    }

    .blue .video-detail .videoTags {
        color: #10263b;
    }
    .black .video-detail .videoTags {
        color: black;
    }
    .blue .video-detail .videoTags a {
        color: #10263b;
        font-weight: bold;
    }
    .black .video-detail .videoTags a {
        color: black;
        font-weight: bold;
    }
    .blue .video-detail .videoTags a:hover {
        color: #10263b;
        text-decoration: none;
    }
    .black .video-detail .videoTags a:hover {
        color: black;
        text-decoration: none;
    }

    /* Avatar */
    .author-detail {
        display: flex;
    }
    .author-detail .avatarHolder img {
        height: 70px;
        width: auto;
        border-radius: 50%;
        position: relative;
    }

    .author-detail .textHolder .presenterInfo {
        margin: 0;
        position: relative;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        padding-left: 10px;
    }
    .blue .author-detail .textHolder .presenterInfo {
        color: #10263b;
    }
    .black .author-detail .textHolder .presenterInfo {
        color: black;
    }

    .blue .courseOptions h3 {
        color: #10263b;
    }
    .black .courseOptions h3 {
        color: black;
    }

    .courseOptions a {
        color: black;
    }
    .courseOptions a:hover {
        text-decoration: none;
    }

    /* Upcoming Events */
    .upcoming-events {
        background-color: #FAFAFA;
    }
    .upcoming-events .live-sessions {
        position: relative;
        height: 120px;
    }
    .upcoming-events .live-sessions img {
        float: left;
        height: 100%;
        width: auto;
    } 
    .upcoming-events .live-sessions h2 {
        margin: 0;
        position: relative;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        left: 20px;
    }
    .upcoming-events .vod-cta {
        position: relative;
        height: 120px;
    }
    .upcoming-events .vod-cta a {
        margin: 0;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    /* CTA */
    .vod-cta a {
        padding: 10px 35px 10px 10px;
        font-size: 1rem;
        display: inline-block;
        width: 100%;
        text-decoration: none;
        color: white;
        background-image: url(/siteelements/images/base/internal/cta-icons/white/bg-icon-white-right-arrow.png);
        background-size: 18px auto;
        background-position: right 10px top 50%;
        background-repeat: no-repeat;
    }
    .blue .vod-cta a {
        border: 2px solid #10263b;
        background-color: #10263b;
    }
    .black .vod-cta a {
        border: 2px solid black;
        background-color: black;
    }

    .vod-cta a:hover {
        background-color: white;
        color: black;
        background-size: 18px auto;
        background-position: right 10px top 50%;
        background-repeat: no-repeat;
    }
    .blue .vod-cta a:hover {
        border: 2px solid #10263b;
        background-image: url(/siteelements/images/base/internal/cta-icons/colour/bg-icon-blue5-right-arrow.png);
    }
    .black .vod-cta a:hover {
        border: 2px solid black;
        background-image: url(/siteelements/images/base/internal/cta-icons/colour/bg-icon-black-right-arrow.png);
    }


    /* Small devices (landscape phones, 576px and up) */
    /* @media (min-width: 576px) { ... } */

    /* Medium devices (tablets, 768px and up) */
    @media (min-width: 768px) {
        #on-demand-gallery #videoCards .video-card {
            height: 400px;
        }
        .blue .title h1 {
            font-size: 2.5rem;
        }
        .black .title h1 {
            font-size: 2.5rem;
        }
    }

    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) {
        #on-demand-gallery .filter-topic select {
            width: 296px;
        }
    }

    /* X-Large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {
        #on-demand-gallery .filter-topic select {
            width: 356px;
        }
        .blue .title h1 {
            font-size: 3rem;
        }
        .black .title h1 {
            font-size: 3rem;
        }
    }

    /* XX-Large devices (larger desktops, 1400px and up) */
    @media (min-width: 1400px) {
        #on-demand-gallery .filter-topic select {
            width: 416px;
        }
        #on-demand-gallery #videoCards .video-card {
            height: 380px;
        }
    }