/* vids-snds.css */



html {
    font: normal calc(.8em + 1vw)/1em Roboto, Helvetica, Arial, sans-serif;  
}
/* defines base font droid */


/* .filltwocolwidth {
    padding-bottom:.0rem; 
    background:none;
    border-bottom: thick solid rgba(0, 102, 102,1); 
} */
/* child of twocolcontent grid */

/* .filltwocolwidth h2 {
    margin-bottom:.125em;
    padding-bottom:0em;
    line-height: 1.125em; 
    text-align:left; 
} */
.filltwocolwidth {
    padding-top: .25em;
    margin-bottom:1em;
    border-bottom: thick solid rgba(0, 102, 102,1);
}
.filltwocolwidth h2 {
    width:100%; 
    /* margin-bottom:.125em; */
    padding-bottom:.25em;
    line-height: 1.125em; 
    text-align:left;  
}


.filltwocolwidth p {
    padding-bottom:0em; 
    line-height: 1.125em; 
    text-align:left; 
}

/* .filltwocolwidth h2 + p {
    padding-top:.125em;
} */

h3.videoheader, h3.recordingheader {
    font-size:150%;
    line-height:1.125em;
    margin:0 0 .5em 0;
}
      
h3.pressheader { 
    font-size:150%;
    margin-top:1em; 
}

.kol:before {
    content:"\2666 \0020";  font-weight:bold; font-size:125%; line-height:0; 
    padding-top:1.25em; 
}
/* 2666 is a diamond, 0020 is a space */

.above {  margin-top: .25rem;   }

.video_iframe-container {
    position:relative; 
    width:100%; height:0; padding-bottom:56.25%;  
}
        
.video_iframe-container iframe {
    position:absolute; top:0; left:0; width:100%; height:100%;  
}
    
figcaption.video_port_caption {
    font-size:1.5em; line-height:1em; color:rgba(0, 52, 52,1); font-style:normal; font-weight:bold;  margin-bottom:.5em; margin-top:-.25em;  
}
        
figcaption.video_port_caption span {
    font-style:italic; font-weight:normal; font-size:.75em; line-height:0em; 
}
    
figcaption.video_port_caption span:before {
    content:"\A"; display:block; 
}
    
.vid-subhead {
    font-style:italic;
    font-weight:normal; font-size:1em; line-height:1.125em;  
    margin-bottom:.75em;
} 
            
    
.video-clip-container {
    overflow: hidden; position:relative; 
    width:100%; height:0; padding-bottom:56.25%; 
    margin-bottom:.5em; 
}
    
.video-clipping-img {
    position:absolute; top:-15.9%; left:0; width:100.1%;   
}
    
.video-clipping-img span {
    font:1.25em/1.25em sans-serif; text-align:center;  color:rgba( 255,0,0, .95);
    position:absolute; top:0; bottom:0; width:20%; height:1.25em; 
    margin:30% 0 0 40% ;     
}
    
.video-clipping-img  [class="utoob-arrow"] { 
    color:white; z-index:1; 
}
.video-clip-container:hover span {
    color:black ; 
}
.video-clip-container:hover  [class="utoob-arrow"] {
    color:white; z-index:1; 
}
    
figure.video {
    -moz-box-shadow: -0.3em 0.3em 0.1em 0.05em rgba(102, 50, 100, 0.5) ;
    -webkit-box-shadow: -0.3em 0.3em 0.1em 0.05em rgba(102, 50, 100, 0.5) ;
    box-shadow: -0.3em 0.3em 0.1em 0.05em rgba(102, 50, 100, 0.5) ;
}
    
/* 
100%+ width makes img larger than its container but is prevented from overflowing by the overflow:hidden call in .clipping and by the negative margins herein 
*/
        
article h3 + figure.video {
    margin-top:.75em;
}
        
figcaption.vidcap {
    font-size:1rem; line-height:1.0rem; color:rgba(0, 0, 0,1); font-style:normal; font-weight:bold;  margin-bottom:1.5rem; margin-top:.25rem; 
    padding:0rem; 
    background:white; 
}
         
figcaption.vidcap span {
    font-style:italic; font-weight:normal; font-size:.85rem; line-height:.85rem; 
}
    
.recordingheader {
    margin:1.5rem 0 1rem 0; padding-bottom:.125rem;
}
        
.player {
    width:calc(100% - .125em);  
}
        
figcaption.player {
    font-size:1rem; line-height:1.0rem; color:rgba(0, 0, 0,1); font-style:normal; font-weight:bold; margin-bottom:.25rem; margin-top:.25rem; 
    padding:0rem; 
    background:white;
}
        
figcaption.player span {
    font-style:italic; font-weight:normal; font-size:.85rem; line-height:.85rem;
}
        
#html5player audio { width:100%; }

#html5player li { 
    margin-top:.75rem; 
    margin-bottom:1.5rem; 
}
                           
audio {
    margin-top:.25em;
    filter: aqua (10%) saturate(10%) grayscale(1) contrast(99%) invert(0%);
    width: 100%;
    height: 2em; background:rgba(0, 102, 102, 1);

    -moz-box-shadow: -0.3em 0.3em 0.1em 0.05em rgba(102, 50, 100, 0.5) ;
    -webkit-box-shadow: -0.3em 0.3em 0.1em 0.05em rgba(102, 50, 100, 0.5) ;
    box-shadow: -0.3em 0.3em 0.1em 0.05em rgba(102, 50, 100, 0.5) ;

    -moz-border-radius:.3rem .3rem .3rem .3rem ;
    -webkit-border-radius:.3rem .3rem .3rem .3rem ;
    border-radius:.3rem .3rem .3rem .3rem ;
}









/* DROID LANDSCAPE STRUCTURE and (max-width: 832px)*/

@supports (display:grid)
{
    @media only screen  and (min-width: 420px) 
    {
        html {
            font: normal 16px/1em Roboto, Helvetica, Arial, sans-serif;  
            
        }
        /* defines base font droid */

        /* html {
            font: normal calc(.8em + .45vw)/1em Roboto, Helvetica, Arial, sans-serif;  
        } */
        
        #article_content { 
            height:auto;
            width:auto;
            margin:0;
            padding:0em 0 5em 0;
            grid-column:3/3;
            grid-row:2 / 2;
            display:grid;
            grid-template-columns:3.5fr 1.25em 2.5fr;
            grid-template-rows: auto 1fr;
        } 
        /* twocolcontent_3-2 */

        .filltwocolwidth {
            padding-top: .75em;
            margin-bottom:.75em;
            grid-column:1/-1;
            grid-row:1/1; 
        }

        .leftcol { 
            grid-column:1/1;
            grid-row:2/2;
         }
    
        .rightcol { 
            grid-column:3/3;
            grid-row:2/2;
        }
        
        .filltwocolwidth h2 {
            /* margin-top:.25em; */
            padding-bottom:.125em;
            line-height: 1.125em; 
            text-align:left;
        }
        /* wide versions ? */   
        
        .filltwocolwidth p {
            font-size: 125% !important;
        }



    }
}
/* END DROID LANDSCAPE STRUCTURE */















/* MC DESK CSS CODE  */

 
@supports (display:grid)
{        
    @media only screen  and (min-width: 832px)
    {

        /* html {
            background:white;
            font: normal 16.5px/1em 'Roboto', Helvetica, Arial, sans-serif;
            min-width:16em;
        } */
        /* sets overall base font size etc. */
        /*
        min-width is existential to prevent width overflows when browser window gets too narrow
        */  

        .filltwocolwidth p {
            font-size: 125% !important;
        }

    }
    /* end (min-width: 832px) */
}
/* end @supports desk */ 
/* END DESKTOP */











/* MC IE11 CSS CODE  */

        
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) 
{
    /* .filltwocolwidth h2 {
        margin-top:.25em;
        padding-bottom:0em;
        line-height: 1.125em; 
        text-align:left;
    } */
    /* wide versions ? */ 

    /* .filltwocolwidth p {
        margin-top:0em;
        padding-bottom:.75em;
        line-height: 1.125em; 
        text-align:left;
    } */


    /* .ienonital {
        font-style:normal; font-weight:400;
    } */

    /* figcaption.vidcap span.ienonital,
    figcaption.player span.ienonital { font-style:normal; font-weight:400; }


} */
/* MC IE11 CSS CODE  */



/* ////  IE11 WIDE 832px to 1140px  //// */
        
@media all and (min-width:832px)
 and (-ms-high-contrast: none), (-ms-high-contrast: active) 
{

    /* #article_content { 
        display:-ms-grid;
        -ms-grid-columns:4fr 1.5em 2fr;
        -ms-grid-rows: auto ;
    } */
    /* twocolcontent_3-2 */

    /* .filltwocolwidth {
        -ms-grid-column:1;
        -ms-grid-column-span: 3;
        -ms-grid-row:1;
        -ms-grid-row-span: 1;
    } */

    /* .leftcol {  
        -ms-grid-column:1;
        -ms-grid-column-span: 1;
        -ms-grid-row:2;
        -ms-grid-row-span: 1;
     } */

    /* .rightcol { 
        -ms-grid-column:3;
        -ms-grid-column-span: 1;
        -ms-grid-row:2;
        -ms-grid-row-span: 1;
    } */

    /* .filltwocolwidth h2 {
        margin-top:.25em;
        padding-bottom:.25em;
        line-height: 1.125em; 
        text-align:left;
    } */
    /* wide versions ? */ 

    /* .filltwocolwidth h2 { border-bottom:none;
    } */

    /* .ie11quote {        
        margin:0rem 0 .25em 0 !important;
        padding:0 0 0 0 !important;
    } */



}

 /* //// end IE11 WIDE 832px to 1140px  //// */



 
 /* ////  IE11 WIDE 1140px and up //// */
        
@media all and (min-width:1140px)
and (-ms-high-contrast: none), (-ms-high-contrast: active) 
{
    /* .filltwocolwidth h2 { border-bottom:none !important;
    } */

}