/* ---------------------------------------------------------
  POLICY PAGE STYLE SHEET 

   The '#' symbol is an alias in CSS for 'id'. So img#foo
   means <img id="foo">.

   When controlling size, use the following syntax:
      width: [some size];
      height: [some size];

   Where [some size] is a number followed by a size metric: 
      %   (percent of parent element)
      px  (absolute size in pixels)
      em  (relative measure based on page font size)

   Examples:
       width: 50%;
       width: 500px;
       width: 12em;
   
   Height should adjust to the specified width proportionally, 
   so you normally only declare the width and not the height. 
   --------------------------------------------------------- */

/* ---------------------------------------------------------
  The style of the policy process image is controlled here. 
   The native size of this image is 556 × 500 pixels.
   --------------------------------------------------------- */
img#process-image{
    /* Add styles below this line. */
    width: 40%;
    float: right;
}

/* ---------------------------------------------------------
  The style of the CONFER image is controlled here. 
   The native size of this image is 299 × 210 pixels. 
   --------------------------------------------------------- */
img#confer-image{
    /* Add styles below this line. */
    

}

/* ---------------------------------------------------------
  This makes both the images positioned on the right, and 
   adds a little bit of space to the left and bottom so 
   surrounding text doesn't tickle it.
   --------------------------------------------------------- */
img#confer-image,
img#process-image{
    float: right;
    margin: 0 0 1em 1em;
}

/* ---------------------------------------------------------
  This makes the images look slightly dimmed if a link tag
   (an <a> tag) is wrapping it. 
   --------------------------------------------------------- */

a img#confer-image,
a img#process-image{
    opacity: 0.85;
    transition: opacity .25s ease-out; /* This adds a smooth animation effect when the hover occurs */
}

/* ---------------------------------------------------------
  This styles the image at the bottom of the page, of a
  person standing up at a microphone.
   --------------------------------------------------------- */

img#mic-image {
    float: left;
    margin: 0 2.5em 1em 0;
    width: 45%;
    max-width: 257px; /* This is the actual size of the image - we do not want it to get stretched larger than what it is. */
}

/* ---------------------------------------------------------
  This removes the slight dimming when the link tag / <a> tag is hovered over. 
   --------------------------------------------------------- */
a:hover img#confer-image,
a:hover img#process-image{
    opacity: 1;
}

/* ---------------------------------------------------------
  This controls the two column grid at the top of the page.
  650px is the size that the screen width needs to be before
  the columns split into two.
   --------------------------------------------------------- */

@media screen and (min-width: 650px) {
    .o-grid__item--left,
    .o-grid__item--right {
      width: 50%;
    }
}