/*
This file is shared by all DMS client sites. Modifications to this file
should be made very carefully.
*/

/* DMS Media   
----------------------------------------------------------*/

.dms-media 
{
    padding: 3px;
}

.dms-media.wrap-left
{
    float: left;
    max-width: 50%;
}

.dms-media.wrap-right
{
    float: right;
    max-width: 50%;
}

.dms-media.no-wrap
{
    display: block;
    float: none;
    max-width: 100%;
}

.dms-media.centered
{
    display: block;
    float: none;
    max-width: 100%;
    text-align: center;
}

.dms-media.no-wrap:after
{
    content: "";
    display: table;
    clear: both;
}

.dms-media.inline
{
    display: inline-block;
    float: none;
    max-width: 100%;
    vertical-align: middle;
}

.dms-media.inline img
{
    display: block;
}

.dms-media img,
.dms-media iframe
{
    max-width: 100%;
}

/* DMS Grid   
----------------------------------------------------------*/

.grid { position: relative; margin: 0 auto; padding: 0 10px; }
.grid:after { content: ""; display: table; clear: both; }

[class*='col-'] { float: left; position: relative; margin: 0; padding: 0 10px; }

.col-1-1 { width: 100%; }

.col-1-2 { width: 50%; }

.col-1-3 { width: 33.33%; }
.col-1-3 { width: calc(100% / 3); }
.col-2-3 { width: 66.66%; }
.col-2-3 { width: calc((100% / 3) * 2); }

.col-1-4 { width: 25%; }
.col-3-4 { width: 75%; }

.col-1-5 { width: 20%; }
.col-2-5 { width: 40%; }
.col-3-5 { width: 60%; }
.col-4-5 { width: 80%; }

.col-1-6 { width: 16.66%; }
.col-1-6 { width: calc(100% / 6); }
.col-5-6 { width: 83.33%; }
.col-5-6 { width: calc((100% / 6) * 5); }

.col-1-8 { width: 12.5%; }

.row { width: 100%; clear: both; position: relative; margin: 0; padding: 0; }
.row:after { content: ""; display: table; clear: both; }

/* Opt-in full bleed grid */
.grid.full-bleed { padding: 0; }

.grid.full-bleed > .row > *[class*='col-']:first-child,
.grid.full-bleed > .col-1-1,
[class*='col-'].bleed-left { padding-left: 0; }

.grid.full-bleed > .row > *[class*='col-']:last-child, /* Doesn't work in IE8, so we have to use bleed-right! */
.grid.full-bleed > .col-1-1,
[class*='col-'].bleed-right { padding-right: 0; }



/* Opt-in full bleed row */
.row.full-bleed { padding: 0; }

.row.full-bleed > *[class*='col-']:first-child,
.row.full-bleed > .col-1-1,
[class*='col-'].bleed-left { padding-left: 0; }

.row.full-bleed > *[class*='col-']:last-child, /* Doesn't work in IE8, so we have to use bleed-right! */
.row.full-bleed > .col-1-1,
[class*='col-'].bleed-right { padding-right: 0; }


/* Opt-in gutter-less grid/row */
.row.no-gutter > [class*="col-"],
.grid.no-gutter > .row > [class*="col-"] { padding-left: 0 ! important; padding-right: 0 ! important; }


/* Image scaling */
.grid img
{
    max-width: 100%;
    height: auto;
}

/* Forced-aspect scaling */
/* Some elements must maintain their aspect ratio but do not natively scale this way. For instance, setting
   an img's width:100%/height:auto will inherently maintain the img's aspect ratio, the same is not true for iframes
   or any other element that doesn't have an intrinsic aspect ratio. Wrapping these elements in a div with a 
   fixed-aspect class will achieve this effect. You must be sure to set the padding-bottom attribute at run-time
   to the desired aspect ratio for this to work. */
.grid .fixed-aspect
{
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    /* This part is key, this value must be equal to the desired aspect ratio, and is generally set per element
       closer to runtime via javascript, a style attribute, or an overriding css rule. */
    padding-bottom: 75.0%;
}  
 
/* Generally the fixed-aspect wrapper should have only one child element */
.grid .fixed-aspect > :first-child
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0; 
    overflow: hidden;
} 

/* Clear   
----------------------------------------------------------*/

.clear
{
    position: relative;
    clear: both;
    height: 0;
    margin: 0;
    padding: 0;
}

.clear:after
{
    content: '';
    display: table;
    clear: both;
}