/*
--------------------------------------------------------------------------------------

	Lists
	components.lists.css

--------------------------------------------------------------------------------------
*/

/*
-------------------------------------------
	Defaults
-------------------------------------------
*/

ul {
  list-style-type: disc;
  margin: 0 0 20px 0;
  padding: 0 0 0 35px;
}

ol {
  list-style-type: decimal;
  margin: 0 0 20px 0;
  padding: 0 0 0 35px;
}

ul ul,
ol ol,
ul ol,
ol ul {
  margin: 10px 0;
  padding: 0 0 0 35px;
}

ul li,
ol li {
  padding: 2px 0;
  margin: 0;
  line-height: 150%;
}

/*
-------------------------------------------
	Reset
-------------------------------------------
*/

.ou-list {
  margin: 0 0 20px 0;
  padding: 0;
  list-style: none;
  list-style-type: none;
}

.ou-list ul {
  margin: 10px 0;
  padding: 0 0 0 30px;
}

.ou-list li {
  list-style: none;
  list-style-type: none;
  display: block;
  margin: 0;
  line-height: 150%;
}

/*
-------------------------------------------
	Unordered - arrows
-------------------------------------------
*/

.ou-list--arrows {
  margin: 0 0 20px 0;
  padding: 0;
}

.ou-list--arrows li {
  position: relative;
  padding: 2px 0 2px 15px;
  margin: 0;
  line-height: 150%;
}

.ou-list--arrows li:before {
  display: inline-block;
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid #737373;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  position: absolute;
  top: 6px;
  left: 0;
}

.ou-list--arrows a {
  text-decoration: none;
}
.ou-list--arrows a:hover {
  text-decoration: underline;
}

/*
-------------------------------------------
	Columns
-------------------------------------------
*/

.ou-list--2-cols,
.ou-list--3-cols {
  -moz-column-count: 2;
  -moz-column-gap: 20px;
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
  column-count: 2;
  column-gap: 20px;
}

.ou-list--2-cols li,
.ou-list--3-cols li {
  display: inline-block;
  width: 100%;
  column-break-inside: avoid;
}

.ou-list--3-cols {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}

/*
-------------------------------------------
	Horizontal
-------------------------------------------
*/

.ou-list--horizontal li {
  display: inline-block;
  margin: 0 5px 0 0;
  padding: 0;
  line-height: 100%;
}

.ou-list--horizontal a {
  text-decoration: none;
  color: #0e56a7;
  background-color: transparent;
}

.ou-list--horizontal a:hover {
  text-decoration: underline;
  color: #000;
  background-color: transparent;
}

/*
-------------------------------------------
	Social media
-------------------------------------------
*/

.ou-list--social a {
  text-decoration: none;
}
.ou-list--social a:hover {
  text-decoration: underline;
}

.ou-list--social p {
  margin: 0 0 5px 0;
}

.ou-list--social li {
  background-position: 0 1px;
  background-repeat: no-repeat;
  background-color: transparent;
  color: #222;
  padding: 8px 0 8px 42px;
  margin-bottom: 4px;
  min-height: 33px;
}
.ou-list__blogger {
  background-image: url(icons/social/icon_blue__Blog.svg);
  background-size: 32px 32px;
}
.ou-list__facebook {
  background-image: url(icons/social/icon_blue__Facebook.svg);
  background-size: 32px 32px;
}
.ou-list__instagram {
  background-image: url(icons/social/icon_blue__Instagram.svg);
  background-size: 32px 32px;
}
.ou-list__linkedin {
  background-image: url(icons/social/icon_blue__Linkedin.svg);
  background-size: 32px 32px;
}
.ou-list__mail {
  background-image: url(icons/social/icon_blue__Mail.svg);
  background-size: 32px 32px;
}
.ou-list__skype {
  background-image: url(icons/social/icon_blue__Skype.svg);
  background-size: 32px 32px;
}
.ou-list__slideshare {
  background-image: url(icons/social/icon_blue__Slideshare.svg);
  background-size: 32px 32px;
}
.ou-list__snapchat {
  background-image: url(icons/social/icon_blue__Snapchat.svg);
    background-size: 32px 32px;
}
.ou-list__tiktok {
  background-image: url(icons/social/icon_blue__TikTok.svg);
    background-size: 32px 32px;
}
.ou-list__twitter {
  background-image: url(icons/social/icon_blue__X.svg);
    background-size: 32px 32px;
}
.ou-list__website {
  background-image: url(icons/social/icon_blue__Website.svg);
    background-size: 32px 32px;
}
.ou-list__youtube {
  background-image: url(icons/social/icon_blue__Youtube.svg);
  background-size: 32px 32px;
}

/* depricated 
.ou-list__google {
  background-image: url(icons/social/icon-google.svg);
  background-size: 32px 32px;
}
.ou-list__flickr {
  background-image: url(icons/social/icon-flickr.svg);
  background-size: 32px 32px;
}
*/




/* icons only */

.ou-list--social--icons li {
  padding: 0;
  display: inline-block;
  background-color: transparent;
  color: #222;
  margin-right: 8px;
}

.ou-list--social--icons a {
  display: block;
  width: 32px;
  height: 32px;
  text-indent: -5000em;
}

/*
-------------------------------------------
	Document lists
-------------------------------------------
*/

.ou-list--docs li {
  padding: 0 0 0 22px;
  margin: 0 0 8px 0;
  background-position: 0 2px;
  background-repeat: no-repeat;
  background-color: transparent;
}

.ou-list--docs a {
  color: #039;
  text-decoration: none;
  display: inline-block;
}

.ou-list--docs--pdf li,
.ou-list__pdf {
  background: url(icons/docs/icon-pdf.png);
  background: url(icons/docs/icon-pdf.svg),
    linear-gradient(transparent, transparent);
}

/* To do - add SVG icons for other docs */

.ou-list--docs--doc li,
.ou-list__doc {
  background-image: url(icons/docs/icon-doc.png);
}

.ou-list--docs--xls li,
.ou-list__xls {
  background-image: url(icons/docs/icon-xls.png);
}

.ou-list--docs--ppt li,
.ou-list__ppt {
  background-image: url(icons/docs/icon-ppt.png);
}

.ou-list--docs--pdf li {
  background-position: 0 2px;
  background-repeat: no-repeat;
}

.ou-list--docs--spotlight-pdf li {
  padding-left: 55px;
  background: url(icons/docs/icon-pdf-large.png);
  background: url(icons/docs/icon-pdf-large.svg),
    linear-gradient(transparent, transparent);
  background-position: 0 0;
  background-repeat: no-repeat;
  min-height: 48px;
}

.ou-list--docs a:hover {
  text-decoration: none;
  color: #000;
}



.ou-list--social li:hover.ou-list__blogger{
  background-image: url(icons/social/icon_blue__Blog.svg);
}
.ou-list--social li:hover.ou-list__facebook {
  background-image: url(icons/social/icon_blue__Facebook.svg);
}
.ou-list--social li:hover.ou-list__flickr {
  background-image: url(icons/social/icon_blue__Flickr.svg);
}
.ou-list--social li:hover.ou-list__instagram  {
  background-image: url(icons/social/icon_blue__Instagram.svg);
}
.ou-list--social li:hover.ou-list__linkedin {
  background-image: url(icons/social/icon_blue__Linkedin.svg);
}
.ou-list--social li:hover.ou-list__skype {
  background-image: url(icons/social/icon_blue__Skype.svg);
}
.ou-list--social li:hover.ou-list__snapchat {
  background-image: url(icons/social/icon_blue__Snapchat.svg);  
}
.ou-list--social li:hover.ou-list__tiktok {
  background-image: url(icons/social/icon_blue__Tiktok.svg);
}
.ou-list--social li:hover.ou-list__twitter {
  background-image: url(icons/social/icon_blue__X.svg);
}
.ou-list--social li:hover.ou-list__website {
  background-image: url(icons/social/icon_blue__Website.svg);
}
.ou-list--social li:hover.ou-list__youtube {
  background-image: url(icons/social/icon_blue__Youtube.svg);
}

/*
.ou-list--social li:hover.ou-list__slideshare {
  background-image: url(icons/social/icon_blue__Slideshare.svg);
}
*/


/*
-------------------------------------------
	Links
-------------------------------------------
*/

.ou-list--links a {
  text-decoration: none;
}
.ou-list--links a:hover {
  text-decoration: underline;
}

@media only screen and (max-width: 400px),
  only screen and (max-device-width: 400px) {
  .ou-list--2-cols,
  .ou-list--3-cols {
    -moz-column-count: 1;
    -moz-column-gap: 0;
    -webkit-column-count: 1;
    -webkit-column-gap: 0;
    column-count: 1;
    column-gap: 0;
  }
} /* end media query */

/*
-------------------------------------------
	Retina
-------------------------------------------
*/

/* all high res screens */

@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (-o-min-device-pixel-ratio: 13/10),
  only screen and (min-resolution: 192dpi) {
  /* social media */
/*
  .ou-list--social li {
    background-size: 32px 32px;
  }

  .ou-list__facebook {
    background-image: url(icons/social/icon-facebook@2x.png);
  }
  .ou-list__twitter {
    background-image: url(icons/social/icon-twitter@2x.png);
  }
  .ou-list__youtube {
    background-image: url(icons/social/icon-youtube@2x.png);
  }
  .ou-list__linkedin {
    background-image: url(icons/social/icon-linkedin@2x.png);
  }
  .ou-list__google {
    background-image: url(icons/social/icon-google@2x.png);
  }
  .ou-list__skype {
    background-image: url(icons/social/icon-skype@2x.png);
  }
  .ou-list__instagram {
    background-image: url(icons/social/icon-instagram@2x.png);
  }
  .ou-list__blogger {
    background-image: url(icons/social/icon-blogger@2x.png);
  }
*/
  /* docs */

  .ou-list--docs li {
    background-size: 16px 16px;
  }

  .ou-list--docs--doc li,
  .ou-list__doc {
    background-image: url(icons/docs/icon-doc@2x.png);
  }

  .ou-list--docs--xls li,
  .ou-list__xls {
    background-image: url(icons/docs/icon-xls@2x.png);
  }

  .ou-list--docs--ppt li,
  .ou-list__ppt {
    background-image: url(icons/docs/icon-ppt@2x.png);
  }
} /* end media query */