/* ------------------------ FONTS ------------------------ */

@font-face {
  font-family: merriweather-sans;
  src: url(fonts/MerriweatherSans-Light.ttf);
  font-weight: 300;
}

@font-face {
  font-family: merriweather-sans;
  src: url(fonts/MerriweatherSans-LightItalic.ttf);
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: merriweather-sans;
  src: url(fonts/MerriweatherSans-Regular.ttf);
  font-weight: 400;
}

@font-face {
  font-family: merriweather-sans;
  src: url(fonts/MerriweatherSans-Italic.ttf);
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: merriweather-sans;
  src: url(fonts/MerriweatherSans-Medium.ttf);
  font-weight: 500;
}

@font-face {
  font-family: merriweather-sans;
  src: url(fonts/MerriweatherSans-MediumItalic.ttf);
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: merriweather-sans;
  src: url(fonts/MerriweatherSans-SemiBold.ttf);
  font-weight: 600;
}

@font-face {
  font-family: merriweather-sans;
  src: url(fonts/MerriweatherSans-SemiBoldItalic.ttf);
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: merriweather-sans;
  src: url(fonts/MerriweatherSans-Bold.ttf);
  font-weight: 700;
}

@font-face {
  font-family: merriweather-sans;
  src: url(fonts/MerriweatherSans-BoldItalic.ttf);
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: merriweather-sans;
  src: url(fonts/MerriweatherSans-ExtraBold.ttf);
  font-weight: 800;
}

@font-face {
  font-family: merriweather-sans;
  src: url(fonts/MerriweatherSans-ExtraBoldItalic.ttf);
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: merriweather;
  src: url(fonts/Merriweather-Light.ttf);
  font-weight: 300;
}

@font-face {
  font-family: merriweather;
  src: url(fonts/Merriweather-LightItalic.ttf);
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: merriweather;
  src: url(fonts/Merriweather-Regular.ttf);
  font-weight: 400;
}

@font-face {
  font-family: merriweather;
  src: url(fonts/Merriweather-Italic.ttf);
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: merriweather;
  src: url(fonts/Merriweather-Bold.ttf);
  font-weight: 700;
}

@font-face {
  font-family: merriweather;
  src: url(fonts/Merriweather-BoldItalic.ttf);
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: merriweather;
  src: url(fonts/Merriweather-Black.ttf);
  font-weight: 800;
}

@font-face {
  font-family: merriweather;
  src: url(fonts/Merriweather-BlackItalic.ttf);
  font-weight: 800;
  font-style: italic;
}

/* ------------------------ IMG ------------------------ */

img {
    max-width: 100%;
    height: auto;
}

/* ------------------------ DROPDOWNS ------------------------ */

.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    min-width: 90px;
}

.show {
	display:block;
}

/* ------------------------ MASTHEAD ------------------------ */

/* BACKGROUND */

.masthead-background {
	background: rgba(0, 0, 0, .2);
	padding: 0px;
	font-size: 13px;
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	color: #FFFFFF;
	height: 40px;
	text-align: left;
  text-decoration: none;
}

/* IMAGES */

.masthead-image {
	background: rgba(0, 0, 0, .0);
	padding: 0px;
	font-size: 13px;
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	color: #FFFFFF;
	display: inline;
	height: 40px;
}
.masthead-image:hover {
	background: rgba(0, 0, 0, .2);
	padding-left: 0px;
	padding-right: 2px;
	padding-top: 14px;
	padding-bottom: 14px;
	font-size: 13px;
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	color: #FFFFFF;
	display: inline;
	height: 40px;
}

/* LINKS */

.masthead-link {
  background: rgba(0, 0, 0, .0);
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
  font-weight: 300;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
	padding-top: 11px;
	padding-bottom: 11px;
	padding-left: 12px;
	padding-right: 12px;
}

.masthead-link:hover {
  background: rgba(0, 0, 0, .2);
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
  font-weight: 300;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
	padding-top: 11px;
	padding-bottom: 11px;
	padding-left: 12px;
	padding-right: 12px;
}

.masthead-user {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
  font-weight: 600;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
	padding: 5px;
}

.masthead-icons {
  opacity: 1;
  text-decoration: none;
}

.user-background {
  background: rgba(0, 0, 0, .0);
}

.user-background:hover {
  background: rgba(0, 0, 0, .2);
}

.user-link {
  background: rgba(0, 0, 0, .0);
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
	padding-top: 11px;
	padding-bottom: 11px;
	padding-left: 0px;
	padding-right: 0px;
}

.user-link:hover {
  background: rgba(0, 0, 0, .0);
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
	padding-top: 11px;
	padding-bottom: 11px;
	padding-left: 0px;
	padding-right: 0px;
}

.user-icon {
  background: rgba(0, 0, 0, .0);
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
	color: #424242;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 5px;
	padding-right: 3px;
}

.user-icon:hover {
  background: rgba(0, 0, 0, .0);
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 5px;
	padding-right: 3px;
}

.chevron-icon {
  background: rgba(0, 0, 0, .0);
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 5px;
}

.chevron-icon:hover {
  background: rgba(0, 0, 0, .0);
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 5px;
}

/* SEARCH */

.masthead-search {
  background: rgba(0, 0, 0, .0);
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 5px;
	padding-right: 3px;
}

.masthead-search:hover {
  background: rgba(0, 0, 0, .2);
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 5px;
	padding-right: 3px;
}

/* ------------------------ NAVIGATION ------------------------ */

/* BACKGROUND */

.navigation-background {
	white-space: nowrap;
	background: rgba(0, 0, 0, .2);
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
	color: #FFFFFF;
	text-align: left;
	vertical-align: middle;
	height: 42px;
	padding: 0px;
}

/* LINKS */

.navigation {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
  font-weight: 300;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 12px;
	padding-right: 12px;
}

.navigation:hover {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
  font-weight: 300;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 12px;
	padding-right: 12px;
}

/* BACKGROUND */

.subcategory-navigation-background {
	white-space: nowrap;
	background: rgba(0, 0, 0, .1);
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
	color: #FFFFFF;
	text-align: middle;
	vertical-align: middle;
	height: 42px;
	padding: 0px;
}

/* LINKS */

.subcategory-navigation {
  background: rgba(0, 0, 0, .3);
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 12px;
	padding-right: 12px;
}

.subcategory-navigation:hover {
  background: rgba(0, 0, 0, .1);
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 12px;
	padding-right: 12px;
}

/* ------------------------ BODY ------------------------ */

body {

	background-image:    url(https://www.daffadillies.co.uk/media/images/graphics/default/background-top.png),
	                     url(https://www.daffadillies.co.uk/media/images/graphics/default/background-bottom.png);
	background-position: top center,
	                     bottom center;
	background-repeat:   no-repeat,
	                     no-repeat;

	/* COLOR - Dependent on background images; often Primary Color #09 */
	background-color: #262C80;

	padding-top: 0px;
	margin-top: 0px;
}

.video-box {
  position:   relative;
  width:      100%;
  height: 0;
  padding-top:   56.25%;
}

.video {
  position: absolute;
  top:      0;
  left:     0;
  bottom:   0;
  right:    0;
  width:    100%;
  height:   100%
}

.play-button-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  cursor: pointer;
}

.play-button-container:hover {
  opacity: 1;
}

.play-button-box {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px;
  padding-bottom: 0px;
  background-color: #00FF9C;
}

.play-button {
  color: #262C80;
  opacity: 1;
}

.comment-rule {
  padding: 0px;
  border-top: 1px solid #616161;
  opacity: 0.4;
}

.container-body {

	/* COLOR - Always Gainsboro or New York #09 for dark themes,
             or white for light themes */
	background-color: #FFFFFF;

	padding: 0px;
}

ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  z-index: 1;
}

ul li {
  display: block;
  position: relative;
  float: left;
  border: 0px;
  font-size: 13px;
  font-weight: 300;
  color: #FFFFFF;
}

li ul {
  display: none;
}

ul li a {
  display: block;
  background: rgba(0, 0, 0, .0);
  padding: 12px 12px 12px 12px;
  text-decoration: none;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 300;
	color: #FFFFFF;
}

ul li a:hover {
  background: rgba(0, 0, 0, .2);
  font-size: 13px;
  font-weight: 300;
  color: #FFFFFF;
  text-decoration: none;
}

li:hover ul {
  background: #F5F5F5;
  display: block;
  position: absolute;
}

li:hover li {
  background: #F5F5F5;
  float: none;
}

li:hover a {
  background: #F5F5F5;
}

li:hover li a:hover {
  background: #E0E0E0;
}

#drop-nav li ul li {
  background: #F5F5F5;
  border-top: 0px;
}

.fb-like {
    vertical-align: middle;
}

.social-share {
	font-size: 1px;
}

/* This gets Facebook to fall into place */
.social-share iframe {
	vertical-align: middle;

}
.fb-share-button{
 margin-right:20px;
}
/* Set an optional width for your button wrappers */
.social-share span {
	display: inline-block;
	width: 110px;
}

/* Adjust the widths individually if you like */
.social-share .google {
	width: 75px;
}

/* ------------------------ HEADERS ------------------------ */

/* PRIMARY HEADERS */

/*
   Headers for use against container background colors in places such as links
   to content, article titles, etc. Larger headers (h1-h3) inherit primary color
   #01 and smaller headers (h4-h5) inherit main text color of the page
   (Gainsboro/New York #06 against light backgrounds, Gainsboro/New York #04
   against dark backgrounds.)
*/

h1 {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 32px;
	font-weight: 800;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;

	/* COLOR - Usually primary theme color #01 */
	color: #262C80;
}

h1 a:link {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 32px;
	font-weight: 800;
	text-decoration: none;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;

	/* COLOR - Usually primary theme color #01 */
	color: #262C80;
}

h1 a:visited {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 32px;
	font-weight: 800;
	text-decoration: none;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;

	/* COLOR - Usually primary theme color #01 */
	color: #262C80;
}

h1 a:hover {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 32px;
	font-weight: 800;
	text-decoration: none;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;

	/* COLOR - Usually primary theme color #05 */
	color: #262C80;
}


h2 {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 24px;
	font-weight: 700;
	text-decoration: none;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;

	/* COLOR - Usually primary theme color #01 */
	color: #262C80;
}

h2 a:link {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 24px;
	font-weight: 700;
	text-decoration: none;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;

	/* COLOR - Usually primary theme color #01 */
	color: #262C80;
}

h2 a:visited {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 24px;
	font-weight: 700;
	text-decoration: none;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;

	/* COLOR - Usually primary theme color #01 */
	color: #262C80;
}

h2 a:hover {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 24px;
	font-weight: 700;
	text-decoration: none;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;

	/* COLOR - Usually primary theme color #05 */
	color: #262C80;
}

h3 {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 18px;
	font-weight: 700;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;

	/* COLOR - Usually primary theme color #01 */
	color: #262C80;
}

h3 a:link {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 18px;
	font-weight: bold;
	text-decoration: 700;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;

	/* COLOR - Usually primary theme color #01 */
	color: #262C80;
}

h3 a:visited {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;

	/* COLOR - Usually primary theme color #01 */
	color: #262C80;
}

h3 a:hover {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;

	/* COLOR - Usually primary theme color #05 */
	color: #262C80;
}


h4 {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 14px;
	font-weight: 600;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;

	/* COLOR - Usually primary text color
	   Gainsboro/New York #06 against light
	   Gainsboro/New York #04 against dark */
	color: #262C80;
}

h4 a:link {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;

	/* COLOR - Usually primary theme color #01 */
	color: #262C80;
}

h4 a:visited {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;

	/* COLOR - Usually primary theme color #01 */
	color: #262C80;
}

h4 a:hover {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;

	/* COLOR - Usually primary theme color #05 */
	color: #262C80;
}


h5 {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
	font-weight: 600;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;

	/* COLOR - Usually primary text color
	   Gainsboro/New York #06 against light
	   Gainsboro/New York #04 against dark */
	color: #616161;
}

h5 a:link {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;

	/* COLOR - Usually primary theme color #01 */
	color: #262C80;
}

h5 a:visited {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
	font-weight: bold;
	text-decoration: 600;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;

	/* COLOR - Usually primary theme color #01 */
	color: #262C80;
}

h5 a:hover {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;

	/* COLOR - Usually primary theme color #05 */
	color: #262C80;
}



/* ------------------------ TEXT ------------------------ */

.petit {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 12px;
  font-weight: 300;

	/* COLOR - Usually Gainsboro or New York #06 against light background,
             or Gainsboro or New York #04 against dark background. */
	color: #616161;
}

.petit a:link {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 12px;
	font-weight: 800;

	/* COLOR - Usually primary theme color #01 */
	color: #262C80;
}

.petit a:visited {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 12px;
	font-weight: 800;

	/* COLOR - Usually primary theme color #01 */
	color: #262C80;
}

.petit a:hover {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;

	/* COLOR - Usually primary theme color #05 */
	color: #262C80;
  background-color: #00FF9C;
}

.pica {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
  font-weight: 300;

  /* COLOR - Usually Gainsboro or New York #06 against light background,
             or Gainsboro or New York #04 against dark background. */
	color: #616161;
}

.pica a:link {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
	font-weight: 800;

	/* COLOR - Usually primary theme color #01 */
	color: #262C80;
}

.pica a:visited {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
	font-weight: 800;

	/* COLOR - Usually primary theme color #01 */
	color: #262C80;
}

.pica a:hover {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;

	/* COLOR - Usually primary theme color #05 */
  color: #262C80;
  background-color: #00FF9C;
}

.primer {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 14px;
  font-weight: 300;

  /* COLOR - Usually Gainsboro or New York #06 against light background,
             or Gainsboro or New York #04 against dark background. */
	color: #616161;
}

.primer a:link {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 14px;
	font-weight: 800;

	/* COLOR - Usually primary theme color #01 */
	color: #262C80;
}

.primer a:visited {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 14px;
	font-weight: 800;

	/* COLOR - Usually primary theme color #01 */
	color: #262C80;
}

.primer a:hover {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;

	/* COLOR - Usually primary theme color #05 */
  color: #262C80;
  background-color: #00FF9C;
}

.paragon {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 16px;
  font-weight: 300;

  /* COLOR - Usually Gainsboro or New York #06 against light background,
             or Gainsboro or New York #04 against dark background. */
	color: #616161;
}

.paragon a:link {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 16px;
	font-weight: 800;

	/* COLOR - Usually primary theme color #01 */
	color: #262C80;
}

.paragon a:visited {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 16px;
	font-weight: 800;

	/* COLOR - Usually primary theme color #01 */
	color: #262C80;
}

.paragon a:hover {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 16px;
	font-weight: 800;
	text-decoration: none;

	/* COLOR - Usually primary theme color #05 */
  color: #262C80;
  background-color: #00FF9C;
}

.mpetit {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 10px;
  font-weight: 300;

	/* COLOR - Usually Gainsboro or New York #06 against light background,
             or Gainsboro or New York #04 against dark background. */
	color: ;
}

.mpetit-header {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 10px;
	font-weight: 800;

	/* COLOR - Usually primary theme color #01 */
	color: ;
}

.mpica {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 12px;
  font-weight: 300;

	/* COLOR - Usually Gainsboro or New York #06 against light background,
             or Gainsboro or New York #04 against dark background. */
	color: ;
}

.mpica-header {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 12px;
	font-weight: 800;

	/* COLOR - Usually primary theme color #01 */
	color: ;
}

.mprimer {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
  font-weight: 300;

	/* COLOR - Usually Gainsboro or New York #06 against light background,
             or Gainsboro or New York #04 against dark background. */
	color: ;
}

.mprimer-header {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
	font-weight: 800;

	/* COLOR - Usually primary theme color #01 */
	color: ;
}

.mparagon {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 14px;
  font-weight: 300;

	/* COLOR - Usually Gainsboro or New York #06 against light background,
             or Gainsboro or New York #04 against dark background. */
	color: ;
}

.mparagon-header {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 14px;
	font-weight: 800;

	/* COLOR - Usually primary theme color #01 */
	color: ;
}

.ad-header {
  font-family: merriweather-sans, Tahoma, Sans-Serif;
  font-size: 11px;
  color: }

.ad-title {
  font-family: merriweather-sans, Tahoma, Sans-Serif;
  font-size: 14px;
  font-weight: bold;
  color: }

.ad-author {
  font-family: merriweather-sans, Tahoma, Sans-Serif;
  font-size: 13px;
  color: }

figure {
  width: 50%;
}

.image {
  width: 100%;
  height: auto;
}

/* ------------------------ MODULES ------------------------ */

/* HEADER */

.module-head {
	padding: 5px;

  /* COLOR - Usually primary theme color #01 against light background, but
             can be any primary shade against dark backgrounds, depending on
             which provides ideal contrast */
  background-color: #00FF9C;
}


.module-title {
  font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 16px;
	font-weight: bold;
  color: #262C80;
}

/* CONTAINER */

.module-container {
	padding: 0px;
  line-height: 15px;

  /* COLOR - Usually Gainsboro or New York #08 against dark backgrounds or
             #01 against light backgrounds; alternatively, a varying shade
             of the primary theme color, depending on which provides ideal
             contrast */
  background-color: #F5F5F5;
}

.module-container:hover {
	padding: 0px;

  /* COLOR - Usually Gainsboro or New York #07 against dark backgrounds or
             #02 against light backgrounds; alternatively, a varying shade
             of the primary theme color, depending on which provides ideal
             contrast */
  background-color: #E0E0E0;
}

.module-static {
	padding: 0px;
  line-height: 15px;

  /* COLOR - Usually Gainsboro or New York #08 against dark backgrounds or
             #01 against light backgrounds; alternatively, a varying shade
             of the primary theme color, depending on which provides ideal
             contrast */
  background-color: #F5F5F5;
}

.module-static-light {
	padding: 0px;
  line-height: 15px;

  /* COLOR - Usually Gainsboro or New York #08 against dark backgrounds or
             #01 against light backgrounds; alternatively, a varying shade
             of the primary theme color, depending on which provides ideal
             contrast */
  background-color: #E0E0E0;
}

  /* COLOR - Usually Gainsboro or New York #08 against dark backgrounds or
             #01 against light backgrounds; alternatively, a varying shade
             of the primary theme color, depending on which provides ideal
             contrast */
  background-color: #F5F5F5;
}

/* CATEGORY CONTAINER */

.category-container {
	padding: 0px;
  line-height: 15px;

  /* COLOR - Usually Gainsboro or New York #08 against dark backgrounds or
             #01 against light backgrounds; alternatively, a varying shade
             of the primary theme color, depending on which provides ideal
             contrast */
}

.category-container:hover {
	padding: 0px;

  /* COLOR - Usually Gainsboro or New York #07 against dark backgrounds or
             #02 against light backgrounds; alternatively, a varying shade
             of the primary theme color, depending on which provides ideal
             contrast */
}

.category-container .header {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 16px;
	font-weight: bold;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;

	/* COLOR - Usually primary theme color #01 */
	color: ;
}

.category-container:hover .header {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 16px;
	font-weight: bold;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;

	/* COLOR - Usually primary theme color #01 */
	color: ;
}

.category-container .header-large {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 32px;
	font-weight: bold;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;
    line-height: 32px;

	/* COLOR - Usually primary theme color #01 */
	color: ;
}

.category-container:hover .header-large {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 32px;
	font-weight: bold;
	padding-top: 3px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-right: 0px;
	margin: 0px;

	/* COLOR - Usually primary theme color #01 */
	color: ;
}

/* FOOTER CONTAINER */

/*
   Container background is often translucent black, but can differ greatly;
   as the background image will show through, the image will determine the
   color of the contrainer
*/

.footer-container {
	background: rgba(0, 0, 0, .2);
	padding: 0px;
  line-height: 16px;
}

.footer-container:hover {
	background: rgba(0, 0, 0, .4);
	padding: 0px;
}


/* ------------------------ BREADCRUMBS ------------------------ */


.breadcrumb-container {
	padding: 0px;
	font-family: merriweather-sans, Tahoma, Sans-Serif;

  /* COLOR - Usually primary theme color #08 */
  background-color: #00FF9C;

}

.breadcrumbs {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 14px;
  font-weight: bold;

	/* COLOR - Usually primary theme color #06 */
	color: #262C80;
}

.breadcrumbs a:link {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 14px;
	font-weight: bold;

	/* COLOR - Usually primary theme color #02 */
	color: #262C80;
}

.breadcrumbs a:visited {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 14px;
	font-weight: bold;

	/* COLOR - Usually primary theme color #02 */
	color: #262C80;
}

.breadcrumbs a:hover {
	font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;

	/* COLOR - Usually primary theme color #00 */
	color: #262C80;
}


/* ------------------------ FOOTER ------------------------ */


.social-media-icons {
  opacity: 0.5;
  text-decoration: none;
}

.social-media-icons:hover {
  opacity: 1;
  text-decoration: none;
}

.footer-text {
  font-family: merriweather-sans, Tahoma, Sans-Serif;
  font-size; 12px;
  font-weight: 300;
  color: #FFFFFF;
}

.footer-text a:link {
  font-family: merriweather-sans, Tahoma, Sans-Serif;
  font-size; 13px;
  font-weight: bold;
  color: #262C80;
}

.footer-text a:visited {
  font-family: merriweather-sans, Tahoma, Sans-Serif;
  font-size; 13px;
  font-weight: bold;
  color: #262C80;
}

.footer-text a:hover {
  font-family: merriweather-sans, Tahoma, Sans-Serif;
  font-size; 13px;
	font-weight: bold;
  text-decoration: none;
  color: #262C80;
  background-color: #00FF9C;
}

.footer-copyright {
  font-family: merriweather-sans, Tahoma, Sans-Serif;
  font-size; 10px;
  font-weight: 300;
  color: #FFFFFF;
}

.footer-module-header {
  font-family: merriweather-sans, Tahoma, Sans-Serif;
  font-size; 16px;
  font-weight: 800;
  color: #FFFFFF;
}

.footer-module-header a:link {
  font-family: merriweather-sans, Tahoma, Sans-Serif;
  font-size; 16px;
  font-weight: 800;
  color: #FFFFFF;
}

.footer-module-header a:visited {
  font-family: merriweather-sans, Tahoma, Sans-Serif;
  font-size; 16px;
  font-weight: 800;
  color: #FFFFFF;
}


.footer-module-header a:hover {
  font-family: merriweather-sans, Tahoma, Sans-Serif;
  font-size; 16px;
  font-weight: 800;
  text-decoration: none;
  color: #FFFFFF;
}

.footer-module-text {
  font-family: merriweather-sans, Tahoma, Sans-Serif;
  font-size; 12px;
  font-weight: 300;
  line-height: 15px;
  color: #FFFFFF;
}


/* ------------------------ FORMS ------------------------ */


.input-box {
  border-radius: 0px;
  width: 100%;
  font-size: 14px;
  background: #FFFFFF;
  border: 1px solid #00FF9C;
  color: #616161;
  padding: 5px;
}

.button-primary {
  appearance:none;
  -webkit-appearance:none;
  padding:10px;
  border:none;
  background-color: #00FF9C;
  color: #262C80;
  border-radius: 0px;
  font-size: 16px;
  font-weight: bold;
}

.button-secondary {
  appearance:none;
  -webkit-appearance:none;
  padding:10px;
  border:none;
  background-color: #F5F5F5;
  color: #616161;
  border-radius: 0px;
  font-size: 16px;
  font-weight: bold;
}

.button-primary :hover {
  appearance:none;
  -webkit-appearance:none;
  padding:10px;
  border:none;
  background-color: #00FF9C;
  color: #262C80;
  border-radius: 0px;
  font-size: 16px;
  font-weight: bold;
}

.button-secondary :hover {
  appearance:none;
  -webkit-appearance:none;
  padding:10px;
  border:none;
  background-color: #FFFFFF;
  color: #616161;
  border-radius: 0px;
  font-size: 16px;
  font-weight: bold;
}

.author-badge{
  background: #01ff9d;
  color: #136c4a;
  font-size: 10px;
  padding: 3px;
  border: 1px solid #136c4a;
  font-weight: bold;
  border-radius: 5px;
}

.staff-badge {
  position: relative;
  display: inline-block;
  border: 0;
}

.staff-badge .staff-badge-text {
  font-family: merriweather-sans, Tahoma, Sans-Serif;
  font-size: 10px;
  visibility: hidden;
  width: 42px;
  background-color: #01ff9d;
  color: #262c80;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  border: 0;
  opacity: 1;
  position: absolute;
  z-index: 100;
  left: 110%;
  top: 0px;
}

.staff-badge:hover .staff-badge-text {
  visibility: visible;
}

.credits {
  border-top: 1px solid #E0E0E0;
}

.subnav {
  display: inline;
  float: left;
  border-bottom: 5px solid transparent;
  padding: 10px;
  padding-bottom: 5px;
}

.subnav:hover {
  display: inline;
  float: left;
  border-bottom: 5px solid #262C80;
  padding: 10px;
  padding-bottom: 5px;
}

.subnav-selected {
  display: inline;
  float: left;
  border-bottom: 5px solid #262C80;
  padding: 10px;
  padding-bottom: 5px;
}

.action-plain {
	padding: 5px;
  background-color: #F5F5F5;
}

.action-color {
	padding: 5px;
  background-color: #00FF9C;
}


.action-plain-text {
  font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 16px;
	font-weight: bold;
  color: #616161;
}

.action-color-text {
  font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 16px;
	font-weight: bold;
  color: #262C80;
}

.action-plain-small {
	padding: 0px;
  background-color: #F5F5F5;
}

.action-color-small {
	padding: 0px;
  background-color: #00FF9C;
}

.action-plain-text-small {
  font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
	font-weight: bold;
  color: #616161;
}

.action-color-text-small {
  font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
	font-weight: bold;
  color: #262C80;
}

.action-alt {
	padding: 5px;
  background-color: #E0E0E0;
}


.action-alt-text {
  font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 16px;
	font-weight: bold;
  color: #388AD7;
}

.action-alt-small {
	padding: 0px;
  background-color: #E0E0E0;
}

.action-alt-text-small {
  font-family: merriweather-sans, Tahoma, Sans-Serif;
	font-size: 13px;
	font-weight: bold;
  color: #388AD7;
}

figure {
  width: 100%;
}

figcaption {
  width: 100%;
  padding: 10px;
  font-family: merriweather, Georgia, Serif;
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  background-color: #F5F5F5;
  color: #262C80;
}

.articlebody {
  padding: 10px;
  padding-right: 40px;
}

@media only screen and (max-width: 962px) {
  .articlebody {
    padding: 10px;
  }
}

.calloutcontainer{
  padding: 5px;
  padding-bottom: 15px;
}

.callout {
  width: 100%;
  padding: 20px;
  padding-bottom: 10px;
  font-family: merriweather, Georgia, Serif;
  background-color: #F5F5F5;
  color: #262C80;
}

.callouttext {
  font-size: 16px;
  font-weight: 300;
}

.quote {
  font-size: 20px;
  font-weight: 800;
  font-style: italic;
}

.quoteauthor {
  font-size: 14px;
  font-weight: 300;
}