/* =============================================================================
 * Override global dimensions for .content-1.
 * Widths are now defined in blocks.
 *
 * [2] No MQ support in IE8- so we need to remove the fixed width set in
 *     global.css
============================================================================= */
.content-page .content-1 {
	max-width:1920px;
	color:#666;
	padding:0;
}
.lt-ie9 .content-1 {
	width:auto; /* [2] */
}

/* =============================================================================
 * Blocks
 *
 * Classname usage
 *
 * block
 *     Used to create a block spanning the entire layout width, with 75px
 *     vertical margins.
 *
 * block_no-vertical-margin
 *     Removes margin-top and margin-bottom on the .block element it is applied
 *     to and margin-top on the next sibling if it too is a .block element.
 *
 * block_wide
 *     Limits the width of a .block element to the same max-width as splash
 *     slideshows. Used on blocks with a background image if the image should not
 *     reach the viewport edges.
 *
 * block_bg-image
 *     Added to blocks that have a background image. Inserts vertical padding on
 *     the .block element to prevent the content from reaching the block edges.
 *     By default the image is centered in the block and not repeated.
 *
 * block_content-fullheight
 *     Removes vertical padding. Added to blocks that have a background image
 *     when the content should be allowed to reach the block's vertical edges,
 *     such as in .splash to allow .video elements to fill the block's height.
 *
 * block_single-fullheight-row
 *     Removes vertical padding. Added to blocks that have a background image
 *     when the content is a single .block-row element. In these cases vertical
 *     padding is added to the .block-row__col elements instead to enable
 *     vertical alignment of their contents (via display:table).
 *
 * bg-repeat
 *     Used when a .block has a background image that should be repeated (both
 *     horizontally and vertically).
 *
 * bg-repeat-x
 *     Sets background-repeat to repeat-x.
 *
 * bg-repeat-y
 *     Sets background-repeat to repeat-y.
 *
 * bg-position-top
 *     Sets background-position to 50% 0 (top aligned, horizontally centered)
 *
 * bg-position-bottom
 *     Sets background-position to 50% 100% (bottom aligned, horizontally centered)
 *
 * block_split
 *     Used on .block_single-fullheight-row elements that have a background image
 *     which is horizontally split in two equal parts (visually). Used in media
 *     queries to remove the background image in narrower viewports.
 *
 * block_content-fullwidth
 *     Removes max-width and padding from .block > .block__inner. Used only on
 *     .block elements that contain a .splash > .splash__block > .block__inner
 *     structure.
 *
 * block_content-centered
 *     Applies text-align:center to all .block content. Changes the width of
 *     .block__header and centers it horizontally.
 *
============================================================================= */


/* Block container
 *
 * [1] Prevent the top margin of the next block from creating a margin
 * [2] No MQ support in IE8- so we speficy a fixed width
----------------------------------------------------------------------------- */
.block {
	margin:75px auto;
}
.block.block_no-vertical-margin {
	margin-top:0;
	margin-bottom:0;
}
.block_no-vertical-margin + .block {
	margin-top:0; /* [1] */
}
.block_wide {
	max-width:1280px;
}
.lt-ie9 .block_wide {
	width:1280px; /* [2] */
}


/* MQ: max-width:768px
----------------------------------------------------------------------------- */
@media only screen and (max-width:768px) {
	.block {
		margin-top:60px;
		margin-bottom:60px;
	}
} /* End media query */


/* MQ: max-width:600px
----------------------------------------------------------------------------- */
@media only screen and (max-width:600px) {
	.block {
		margin-top:50px;
		margin-bottom:50px;
	}
} /* End media query */


/* MQ: max-width:480px
----------------------------------------------------------------------------- */
@media only screen and (max-width:480px) {
	.block {
		margin-top:40px;
		margin-bottom:40px;
	}
} /* End media query */


/* Block backgrounds
 * Class names added by content editors to repeat and position backgrounds
 * The default is 50% 50% no-repeat
----------------------------------------------------------------------------- */
.block {
	background-position:50% 50%;
	background-repeat:no-repeat;
}
.bg-repeat {
	background-repeat:repeat;
}
.bg-repeat-x {
	background-repeat:repeat-x;
}
.bg-repeat-y {
	background-repeat:repeat-y;
}
.bg-position-top {
	background-position:50% 0;
}
.bg-position-bottom {
	background-position:50% 100%;
}

/* Blocks with a background image have vertical padding
----------------------------------------------------------------------------- */
.block_bg-image {
	padding-top:75px;
	padding-bottom:75px;
}


/* MQ: max-width:768px
----------------------------------------------------------------------------- */
@media only screen and (max-width:768px) {
	.block_bg-image {
		padding-top:60px;
		padding-bottom:60px;
	}
} /* End media query */


/* MQ: max-width:600px
----------------------------------------------------------------------------- */
@media only screen and (max-width:600px) {
	.block_bg-image {
		padding-top:50px;
		padding-bottom:50px;
	}
} /* End media query */


/* MQ: max-width:480px
----------------------------------------------------------------------------- */
@media only screen and (max-width:480px) {
	.block_bg-image {
		padding-top:40px;
		padding-bottom:40px;
	}
} /* End media query */


/* Blocks with a background image and full-height content do not have vertical
 * padding
----------------------------------------------------------------------------- */
.block_bg-image.block_content-fullheight,
.block_bg-image.block_single-fullheight-row {
	padding-top:0;
	padding-bottom:0;
}


/* Blocks with content in only one column ("split")
----------------------------------------------------------------------------- */


/* MQ: max-width:768px
 *
 * [1] Remove bg-image from blocks with content in only one column ("split")
 * [2] Remove min-height from blocks with content in only one column ("split")
 *
 * !important is used to override generated id selectors
----------------------------------------------------------------------------- */
@media only screen and (max-width:768px) {
	.block_split {
		background-image:none !important; /* [1] */
	}
	.block_split .block-row {
		min-height:0 !important; /* [2] */
	}
} /* End media query */



/* Block inner container
 *
 * [1] Keep content away from viewport edges
 * [2] Let content reach viewport edges. Used only for splash-containing blocks.
 * [3] No MQ support in IE8- so we speficy a fixed width
 * [4] Override the width specified in [3]
 * [5] Remove margin when enclosing content in an element for animation purposes
----------------------------------------------------------------------------- */
.block__inner {
	max-width:980px;
	margin:0 auto;
	padding:0 40px; /* [1] */
}
.block_content-fullwidth > .block__inner {
	max-width:none; /* [2] */
	padding:0; /* [2] */
}
.lt-ie9 .block__inner {
	width:980px; /* [3] */
}
.lt-ie9 .block_content-fullwidth > .block__inner {
	width:auto; /* [4] */
}
.block__inner > [data-animation-type] > *:last-child {
	margin-bottom:0;
}


/* MQ: max-width:600px
----------------------------------------------------------------------------- */
@media only screen and (max-width:600px) {
	.block__inner {
		padding-right:30px;
		padding-left:30px;
	}
} /* End media query */


/* Block header
 * May be visually hidden
 *
 * [1] Back compat (calc)
 * [2] 3/4 wide - 1/4 of the gutter width (36px)
 * [3] No bottom margin if there is no other content
----------------------------------------------------------------------------- */
.block__header {
	width:726px; /* [1] */
	width:calc(75% - 9px); /* [2] */
	margin-bottom:40px;
}
.block__header:last-child {
	margin-bottom:0; /* [3] */
}
.block_content-centered .block__header {
	width:62%;
	width:calc(100% - 372px);
	margin-right:auto;
	margin-left:auto;
	text-align:center;
}
.block__header .intro {
	line-height:22px;
}
.block__header:last-child .intro > *:last-child {
	margin-bottom:0; /* [3] */
}

/*
 * Fullwidth when in a row column
 */
.block-row__col .block__header {
	width:auto;
	text-align:left;
}

.block-description{
	color: #999;
	clear: both;
	display: block;
	font-size: 17px;
	line-height: 20px;
	margin-top: 13px;
	margin-bottom: 18px;
}

img.description-image {
	display: block;
}


/* MQ: max-width:1060px
 * [1] 3/4 wide - 1/4 of the gutter width (32px)
----------------------------------------------------------------------------- */
@media only screen and (max-width:1060px) {
	.block__header {
		width:calc(75% - 8px); /* [1] */
	}
} /* End media query */


/* MQ: max-width:980px
 *
 * [1] width:100% to avoid shrinkwrapping due to auto left/right margins
----------------------------------------------------------------------------- */
@media only screen and (max-width:980px) {
	.block_content-centered .block__header {
		max-width:608px;
		width:100%; /* [1] */
	}
} /* End media query */


/* MQ: max-width:768px
----------------------------------------------------------------------------- */
@media only screen and (max-width:768px) {
	.block__header {
		width:auto;
		margin-bottom:24px;
	}
	.block_content-centered .block__header {
		max-width:548px;
	}
} /* End media query */


/* MQ: max-width:600px
----------------------------------------------------------------------------- */
@media only screen and (max-width:600px) {
	.block__header .intro {
		font-size:16px;
		line-height:20px;
	}
} /* End media query */


/* MQ: max-width:480px
----------------------------------------------------------------------------- */
@media only screen and (max-width:480px) {
	.block__header {
		margin-bottom:20px;
	}
} /* End media query */


/* Block content
 *
 * Most content of row columns is wrapped in <div class="block-content"></div>.
 * Content may be TinyMCE content OR any number of img elements OR a
 * <div class="video"></div> element.
 *
 * The exception is <div class="bullets"></div>, which may only contain
 * <div class="bullet"></div> elements and is not wrapped in .block-content.
 *
 * Classname usage
 *
 * block-content_media
 *     Used on .block-content elements that contain one or more images OR a
 *     <div class="video"></div> element.
 *
 * light-text
 *     Makes text light (white)
 *
 * block-content_left-padding
 *     Adds padding to the left.
 *
 * block-content_right-padding
 *     Adds padding to the right.
 *
 * block-content_horizontal-padding
 *     Adds padding to the right AND left. Intended for use in columns that
 *     have a background colour or image.
 *
 * block-content_vertical-padding
 *     Adds padding to the top and bottom. Intended for use in columns that
 *     have a background colour or image.
 *
 * block-content_align-center
 *     Center-aligns content horizontally.
 *
 * block-content_align-right
 *     Right-aligns content horizontally.
 *
----------------------------------------------------------------------------- */

/*
 * Text colours
 */
.block h2,
.block h3 {
	color:#333;
}
.light-text,
.light-text h2,
.light-text h3 {
	color:#fff;
}

/*
 * Font sizes and line heights
 */
.block {
	font-size:17px;
	line-height:22px;
}
.block h2 {
	margin-bottom:20px;
	font-weight:200;
	font-size:40px;
	line-height:42px;
	letter-spacing:-0.5px;
}
.block h3 {
	font-size:24px;
	line-height:1;
}

/* change word-break */
.block h2,
.block h3 {
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	overflow-wrap: break-word;
	word-wrap: break-word;
}


/* MQ: max-width:768px
 * Reduce bottom margin
----------------------------------------------------------------------------- */
@media only screen and (max-width:768px) {
	.block h2,
	.block p,
	.block ol,
	.block ul {
		margin-bottom:12px;
	}
} /* End media query */


/* MQ: max-width:480px
 * Reduce bottom margin
----------------------------------------------------------------------------- */
@media only screen and (max-width:480px) {
	.block h2,
	.block p,
	.block ol,
	.block ul {
		margin-bottom:10px;
	}
} /* End media query */


/* MQ: max-width:600px
 * Reduce font size
----------------------------------------------------------------------------- */
@media only screen and (max-width:600px) {
	.block h2 {
		font-size:36px;
		line-height:38px;
	}
} /* End media query */


/* MQ: max-width:480px
 * Reduce font size
----------------------------------------------------------------------------- */
@media only screen and (max-width:480px) {
	.block h2 {
		font-size:34px;
		line-height:36px;
	}
} /* End media query */

/*
 * Heading kicker
 */
.kicker {
	display:block;
	margin-bottom:1px;
	font-size:28px;
	line-height:1;
}


/* MQ: max-width:768px
 * Reduce font-size
----------------------------------------------------------------------------- */
@media only screen and (max-width:768px) {
	.splash .kicker {
		font-size:20px;
	}
	.splash .splash-row__col_centered .block-content p {
		margin-bottom: 0;
		margin-top: 8px;
	}
} /* End media query */


/*
 * Alignment
 */
.block_content-centered .block-content {
	text-align:center;
}

/*
 * Margins
 *
 * [1] Fallback for browsers that do not support calc()
 * [2] Matches gutter width
 */
.block-content > *:last-child,
.block-content > [data-animation-type] > *:last-child  {
	margin-bottom:0;
}
.block-content_left-padding {
	padding-left:138px; /* [1] */
	padding-left:calc(100% - 334px);
}
.block-content_right-padding {
	padding-right:138px; /* [1] */
	padding-right:calc(100% - 334px);
}
.block-content_horizontal-padding {
	padding-right:36px; /* [2] */
	padding-left:36px;
}
.block-content_vertical-padding {
	padding-top:36px; /* [2] */
	padding-bottom:36px;
}


/* MQ: max-width:980px
 * Adjust horizontal padding
----------------------------------------------------------------------------- */
@media only screen and (max-width:980px) {
	.block-content_horizontal-padding {
		padding-right:32px; /* [2] */
		padding-left:32px;
	}
	.block-content_vertical-padding {
		padding-top:32px; /* [2] */
		padding-bottom:32px;
	}
} /* End media query */


/* MQ: max-width:780px
 * Remove padding from content areas with right OR left padding
 * We do this at 780px width since this is where calc(100% - 334px) equals 0.
----------------------------------------------------------------------------- */
@media only screen and (max-width:780px) {
	.block-content_left-padding {
		padding-left:0;
	}
	.block-content_right-padding {
		padding-right:0;
	}
} /* End media query */


/*
 * Images
 *
 * [1] Contain floated image
 * [2] Enable positioning of slideshow controls when a .block-content_media is
 *     turned into a slideshow
 * [3] Extra top margin if the media block is the first child of a one-column
 *     row preceded by a .block__header. 35px + 40px bottom margin on the
 *     .block__header = 75px total.
 */
.block-content_media {
	overflow:hidden; /* [1] */
}
.block-content_media img {
	display:block;
}
.block-content_align-center {
	text-align:center;
}
.block-content_align-center img {
	margin:0 auto;
}
.block-content_align-right {
	text-align:right;
}
.block-content_align-right img {
	float:right;
}
.block-content_media.slideshow-active {
	position:relative; /* [2] */
}
.block__header + .block-row:not(.block-row_cols-2) .block-content_media:first-child {
	margin-top:35px; /* [3] */
}

/*margin top if we use a .block-content_media before a .bullets block*/
.block-content_media + .bullets {
  margin-top: 40px;
}

/* MQ: max-width:768px
 * Linearised content (no table layout), change top margin
----------------------------------------------------------------------------- */
@media only screen and (max-width:768px) {
	.block__header + .block-row:not(.block-row_cols-2) .block-content_media:first-child {
		margin-top:60px;
	}
} /* End media query */


/* MQ: max-width:600px
 * Change top margin
----------------------------------------------------------------------------- */
@media only screen and (max-width:600px) {
	.block__header + .block-row:not(.block-row_cols-2) .block-content_media:first-child {
		margin-top:50px;
	}
} /* End media query */


/* MQ: max-width:480px
 * Change top margin
----------------------------------------------------------------------------- */
@media only screen and (max-width:480px) {
	.block__header + .block-row:not(.block-row_cols-2) .block-content_media:first-child {
		margin-top:40px;
	}
} /* End media query */


/* Bullet blocks
 * Teasers/feature bullets
 * Default layout is four per row
 *
 * [1] Guesstimate for browsers that don't support calc()
 * [2] 27px = 3/4 of the gutter width
 * [3] No bottom margin on the last four
----------------------------------------------------------------------------- */
.bullet {
	float:left;
	width:20%; /* [1] */
	width:calc(25% - 27px); /* [2] */
	margin-bottom:20px;
	margin-left:36px;
	font-size:16px;
	line-height:20px;
}
.bullet:nth-child(4n + 1) {
	clear:left;
	margin-left:0;
}
.bullet:nth-last-child(-n+4) {
	margin-bottom:0; /* [3] */
}
.bullet > img {
	display:block;
}
.bullet h3 {
	margin-top:10px;
	margin-bottom:6px;
}
.bullet > *:last-child {
	margin-bottom:0;
}

/*
 * Two per row when in a two-column grid
 *
 * [1] Guesstimate for browsers that don't support calc()
 * [2] Restore bottom margin
 * [3] No bottom margin on the last two
 */
.block-row_cols-2 .bullet {
	width:42%; /* [1] */
	width:calc(50% - 18px);
	margin-bottom:20px; /* [2] */
}
.block-row_cols-2 .bullet:nth-last-child(-n+2) {
	margin-bottom:0; /* [3] */
}
.block-row_cols-2 .bullet:nth-child(odd) {
	clear:left;
	margin-left:0;
}


/* MQ: max-width:980px
 *
 * [1] Gutter width changed from 36px to 32px. 24px = 3/4 gutter width.
 * [2] Gutter width changed from 36px to 32px. 16px = 1/2 gutter width.
----------------------------------------------------------------------------- */
@media only screen and (max-width:980px) {
	.bullet {
		width:calc(25% - 24px); /* [1] */
		margin-left:32px;
	}
	.block-row_cols-2 .bullet {
		width:calc(50% - 16px); /* [2] */
	}
} /* End media query */


/* MQ: min-width:769px and max-width:980px
 *
 * Change font sizes
----------------------------------------------------------------------------- */
@media only screen and (min-width:769px) and (max-width:980px) {
	.bullet {
		font-size:15px;
		line-height:18px;
	}
	.bullet h3 {
		font-size:22px;
	}
} /* End media query */


/* MQ: max-width:768px
 * Change margins
 * Two bullets per row
 *
 * [1] Gutter width changed from 32px to 20px. 10px = 1/2 gutter width.
 * [2] Margin-left now equals gutter width.
----------------------------------------------------------------------------- */
@media only screen and (max-width:768px) {
	.bullet h3 {
		margin-top:6px;
	}
	.bullet:nth-child(n) {
		width:calc(50% - 10px); /* [1] */
		margin-left:20px; /* [2] */
	}
	.bullet:not(:nth-last-child(-n+2)) {
		margin-bottom:24px;
	}
	.bullet:nth-child(odd) {
		clear:left;
		margin-left:0;
	}
} /* End media query */


/* MQ: max-width:600px
----------------------------------------------------------------------------- */
@media only screen and (max-width:600px) {
	/*
	 * Change font sizes
	 */
	.block {
	font-size:16px;
	line-height:20px;
	}

	.bullet {
		font-size:15px;
		line-height:18px;
	}
	.bullet h3 {
		font-size:22px;
	}

	/*
	 * Linearise bullets in split blocks
	 */
	.block_split .bullet:nth-child(n) {
		float:none;
		width:auto;
		margin-bottom:24px;
		margin-left:0;
	}
	.block_split .bullet:last-child {
		margin-bottom:0;
	}
} /* End media query */


/* MQ: max-width:480px
----------------------------------------------------------------------------- */
@media only screen and (max-width:480px) {
	/*
	 * Change margins
	 */
	.bullet h3 {
		margin-top:5px;
		margin-bottom:5px;
	}

	/*
	 * Linearise bullets and change vertical margins between bullets
	 * :not(#foo) is just used to increase selector specificity
	 */
	.bullet:not(#foo) {
		float:none;
		width:auto;
		margin-bottom:20px;
		margin-left:0;
	}
	.bullet:last-child:not(#foo) {
		margin-bottom:0;
	}
} /* End media query */


/* MQ: max-width:320px
----------------------------------------------------------------------------- */
@media only screen and (max-width:320px) {
	/*
	 * Change font sizes
	 */
	.bullet h3 {
		font-size:20px;
	}
} /* End media query */



/* =============================================================================
 * Rows and columns
 *
 * Classname usage
 *
 * block_align-top
 *     Top-aligns content in child .block-row__col elements
 *
 * block_align-bottom
 *     Bottom-aligns content in child .block-row__col elements
 *
 * block-row_cols-2
 *     Sets the width of child .block-row__col elements to 50%
 *
 * block-row__col_empty
 *     Used on the empty .block-row__col element when only one of the columns in
 *     a two column row has content. Selected by content editors.
 *
 * block-row__collapsed
 *     Used to remove horizontal spacing between block-row__cols
 *
 * [1] Fixed width for browsers that don't support calc()
============================================================================= */
.block-row {
	display:table;
	width:1052px; /* [1] */
	width:calc(100% + 72px);
	margin:0 -36px;
	border-spacing:36px 0;
	table-layout:fixed;
}
.block-row.block-row__collapsed {
	border-spacing: 0;
}
.block-row.block-row__collapsed .block-row__col + .block-row__col {
	margin-top: 0;
}
.block-row__col {
	display:table-cell;
	width:100%;
	background-position:50% 50%;
	background-repeat:no-repeat;
	vertical-align:middle;
}
.block_align-top .block-row__col {
	vertical-align:top;
}
.block_align-bottom .block-row__col {
	vertical-align:bottom;
}
.block-row_cols-2 .block-row__col {
	width:50%;
}


/* Full-height rows
 * In .block_single-fullheight-row elements, columns have vertical padding
----------------------------------------------------------------------------- */
.block_single-fullheight-row .block-row__col {
	padding-top:75px;
	padding-bottom:75px;
}


/* MQ: max-width:980px
 * Reduce gutter width
----------------------------------------------------------------------------- */
@media only screen and (max-width:980px) {
	.block-row {
		width:calc(100% + 64px);
		margin:0 -32px;
		border-spacing:32px 0;
	}
} /* End media query */


/* MQ: max-width:768px
----------------------------------------------------------------------------- */
@media only screen and (max-width:768px) {
	/*
	 * Linearise .block-row columns and give columns a bottom margin
	 * :nth-child() used to increase specificity
	 *
	 * [1] Hide empty columns
	 */
/*	right-aligned content got wrong width on "auto" changed to 100%*/
	.block-row,
	.block-row__col:nth-child(n) {
		display:block;
		width:100%;
		margin:0;
	}
	.block-row__col:not(.block-row__col_empty) + .block-row__col {
		margin-top:60px;
	}
	.block-row__col_empty:nth-child(n) {
		display:none; /* [1] */
	}

	/*
	 * Reduce and move vertical padding in .block_single-fullheight-row elements
	 * from columns to blocks
	 */
	.block_single-fullheight-row,
	.block_bg-image.block_single-fullheight-row {
		padding-top:60px;
		padding-bottom:60px;
	}
	.block_single-fullheight-row .block-row__col {
		padding-top:0;
		padding-bottom:0;
	}

	/*
	 * Remove background images from columns
	 *
	 * [1] !important is used to override generated id selectors
	 */
	.block-row__col {
		background-image:none !important; /* [1] */
	}
} /* End media query */


/* MQ: max-width:600px
----------------------------------------------------------------------------- */
@media only screen and (max-width:600px) {
	/*
	 * Reduce vertical margin/padding between columns
	 */
	.block-row__col:not(.block-row__col_empty) + .block-row__col {
		margin-top:50px;
	}

	/*
	 * Reduce vertical padding in .block_single-fullheight-row elements
	 */
	.block_single-fullheight-row,
	.block_bg-image.block_single-fullheight-row {
		padding-top:50px;
		padding-bottom:50px;
	}
} /* End media query */


/* MQ: max-width:480px
----------------------------------------------------------------------------- */
@media only screen and (max-width:480px) {
	/*
	 * Reduce vertical margin/padding between columns
	 */
	.block-row__col:not(.block-row__col_empty) + .block-row__col {
		margin-top:40px;
	}

	/*
	 * Reduce vertical padding in .block_single-fullheight-row elements
	 */
	.block_single-fullheight-row,
	.block_bg-image.block_single-fullheight-row {
		padding-top:40px;
		padding-bottom:40px;
	}
} /* End media query */



/* =============================================================================
 * Splash
 *
 * Blocks that will be turned into a slideshow if there are more than one in the
 * same splash container
============================================================================= */
.splash {
	position:relative;
}
.js .splash:not(.slideshow-active) .splash__block + .splash__block {
	display:none;
}

/* Active slideshow
 * JavaScript is active and a splash block contains an initialised slideshow.
 * Limit block width and center it.
----------------------------------------------------------------------------- */
.splash.slideshow-active {
	margin:0 auto;
}


/* Splash block
 * Background image + content, either a standalone element or, if there are more
 * than one, a slideshow.
----------------------------------------------------------------------------- */
.splash__block {
	background-position:50% 50%;
	background-repeat:no-repeat;
}


/* Rows and columns
 * A separate display:table system than the global one to avoid conflicts that
 * are tricky to resolve
----------------------------------------------------------------------------- */
.splash-row {
	display:table;
	width:100%;
	height:600px;
}
.splash-row__col {
	display:table-cell;
	vertical-align:middle;
}

/*
 * Content block
 */
.splash-row__col .block-content {
	display:inline-block;
	width:472px;
	text-align:left;
}

/*
 * Right aligned content block
 */
.splash-row__col_right {
	text-align:right;
}

/*
 * Bottom centered content block
 *
 * [1] Make room for slideshow navigation
 */
.splash-row__col_splash-row__col_centered_bottom,
.splash-row__col_centered {
	padding-right:40px;
	padding-bottom:36px; /* [1] */
	padding-left:40px;
	vertical-align:bottom;
	text-align:center;
}

/*
 * Top centered content block
 *
 */
.splash-row__col_centered_top {
	padding-right:40px;
	padding-top:40px;
	padding-left:40px;
	vertical-align:top;
	text-align:center;
}


/*.splash-row__col_centered .block-row__col{
	display:inline-block;
}*/

/*
 * Sliderfix
 */
.splash-row__col .block-row__col{
	display: inline-block;
	max-width:980px;
}

.splash-row__col.splash-row__col_centered p {
margin: 0;
}

.splash-row__col_splash-row__col_centered_bottom .block-content,
.splash-row__col_centered .block-content {
	width:100%;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
}

/* Typography, margins, block sizes
----------------------------------------------------------------------------- */
.splash {
	font:200 20px/26px "Myriad Pro", Arial, Helvetica, sans-serif;
}

/*.splash .block-content > *:not(:last-child) {
	margin-bottom:12px;
}*/

.splash h2 {
	font-size:50px;
	line-height:54px;
	margin-bottom:0;
}

.splash .block-content p{
	margin-bottom:0;
	margin-top:12px;
}

.splash .block-content p .read-more,
.splash .block-content p .button{
	margin-top: 0;
}

@media only screen and (min-width:1061px) {
	.splash .block-content p .button {
		margin-top: 14px;
	}
}

/*
 * Top margin on read more or button links in splash
 */
.splash .button,
.splash .read-more {
	margin-top:12px;
}

/*
 * Read more link in splash
 */
.splash .read-more:after {
	width:7px;
	height:11px;
	background-size:auto 11px;
}

.kicker{
	margin-bottom:6px;
}


/* MQ: max-width:1060px
 *
 * [1] Left and right aligned blocks are 50% of available width - half gutter
 *     width (36px)
----------------------------------------------------------------------------- */
@media only screen and (max-width:1060px) {
	/*
	 * Rows/columns/content layout
	 */
	.splash-row__col:not(.splash-row__col_centered):not(.splash-row__col_centered_top) .block-content {
		width:calc(50% - 18px); /* [1] */
	}

	/*
	 * Typography
	 */
	.splash h2 {
		font-size:40px;
		line-height:42px;
	}
} /* End media query */


/* Special styles for the centered splash headline */
@media only screen and (min-width:981px) {
	.splash-row__col_centered h2{
		font-size:50px;
		line-height: 54px;
	}
}

/* MQ: max-width:768px*/
@media only screen and (max-width:980px) {
	.splash-row {
		height: 550px;
	}
}/* End media query */



/* MQ: max-width:768px
 * [1] Left and right aligned blocks are 50% of available width - half gutter
 *     width (20px)
----------------------------------------------------------------------------- */
@media only screen and (max-width:768px) {
	/*
	 * Rows/columns/content layout
	 */
	.splash-row__col:not(.splash-row__col_centered):not(.splash-row__col_centered_top) .block-content {
		width:calc(50% - 34px); /* [1] */
	}
	.splash-row__col_centered {
		padding-right:0;
		padding-left:0;
	}

	/*
	 * Typography
	 */
	.splash {
		font-size:17px;
		line-height:21px;
	}
	.splash h2 {
		font-size:36px;
		line-height:38px;
	}

	/*
	 * Video
	 */
	.splash .video {
		margin-right:-40px;
		margin-left:-40px;
	}
} /* End media query */


/* MQ: max-width:600px
 *
 * [1] Make room for slideshow navigation
 * [2] Cover entire viewport; compensate for padding on .block__inner
----------------------------------------------------------------------------- */
@media only screen and (max-width:600px) {
	/*
	 * Rows/columns/content layout
	 */
	.splash-row__col:not(.splash-row__col_centered):not(.splash-row__col_centered_top) {
		padding-bottom:40px; /* [1] */
		vertical-align:bottom;
/*		text-align:left;*/
	}
	.splash-row__col:not(.splash-row__col_centered):not(.splash-row__col_centered_top) .block-content {
		width:100%;
	}

	.splash-row .splash-row__col_right .block-content h2,
	.splash-row .splash-row__col_left .block-content h2,
	.splash-row .splash-row__col_right .block-content p,
	.splash-row .splash-row__col_left .block-content p{
		margin-bottom: 0;
	}

	/*
	 * Video
	 */
	.splash .video {
		margin-right:-30px; /* [2] */
		margin-left:-30px;
	}
} /* End media query */


/* Paging
 * Override global styling for Flexslider dot navigation
 *
 * [1] Matches link height (of selected/active link)
----------------------------------------------------------------------------- */
.content-page .flex-control-paging {
	bottom:15px;
	margin-bottom:0;
	line-height:10px; /* [1] */
}
.content-page .flex-control-paging li {
	margin:0;
	vertical-align:middle;
}
.content-page .flex-control-paging li a {
	width:8px;
	height:8px;
	margin:0 10px;
	border-radius:50%;
	background:#fff;
}
.content-page .flex-control-paging li a.flex-active {
	margin:0 9px;
	border:1px solid #e30040;
	background:transparent;
}
.content-page.lt-ie9 .flex-control-paging li a.flex-active {
	background:#999;
}



/* =============================================================================
 * Video
 *
 * Container for video element and optional poster and play/pause button
============================================================================= */
.video {
	position:relative;
	overflow:hidden;
}


/* Video element
 *
 * [1] No video support in IE8- so style the container element to make the fallback
 *     text legible
----------------------------------------------------------------------------- */
.video video {
	display:block;
	width:100%;
	height:auto;
}
.lt-ie9 .video {
	padding:20px; /* [1] */
	background:#fff;
	color:#000;
}


/* Poster
 * Content displayed when the video is not playing. Contains the play/pause
 * button, if one exists.
 *
 * [1] No video support in IE8- which means the video element will be shorter
 *     and the poster may not fit if positioned absolutely
 * [2] Make sure the heading is visible on white background
 * [3] Smaller heading on videos displayed in a column
 * [4] Hide media controls in webkits to hide the native play button i iOS
----------------------------------------------------------------------------- */
.video__poster {
	position:absolute;
	right:40px;
	bottom:29px;
	left:40px;
	z-index:1;
	text-align:center;
}
.lt-ie9 .video__poster {
	position:static; /* [1] */
}
.video__poster > * {
	transition:opacity 0.5s ease-in-out;
}
.video.playing .video__poster > * {
	opacity:0;
}
.video.playing .video__poster > button {
	bottom:-30px;
}
.video.playing:hover .video__poster > button {
	opacity:1;
}
.video__poster h2 {
	font-size: 50px;
	line-height: 54px;
	margin-bottom:0;
}
.block-row__col .video__poster h2 {
	font-size:40px; /* [3] */
	line-height:42px;
}
.lt-ie9 .video__poster {
	color:#000; /* [2] */
}
.video video::-webkit-media-controls {
	display:none !important; /* [4] */
}


/* MQ: min-width:769px and max-width:1069px
----------------------------------------------------------------------------- */
@media only screen and (min-width:769px) and (max-width:1060px) {
	.video__poster h2 {
		font-size:40px;
		line-height:1;
	}
} /* End media query */


/* MQ: max-width:768px
----------------------------------------------------------------------------- */
@media only screen and (max-width:768px) {
	.video__poster h2 {
		font-size: 36px;
		line-height: 38px;
		margin-bottom:3px;
	}
} /* End media query */


/* MQ: max-width:600px
----------------------------------------------------------------------------- */
@media only screen and (max-width:600px) {
	.video__poster {
		bottom:30px;
	}
	.video.playing .video__poster > button {
		bottom: -15px;
	}
} /* End media query */


/* Play/pause button
 *
 * [1] Padding to avoid clipping box-shadow on the :before pseudo-element on
 *     :hover and :focus
----------------------------------------------------------------------------- */
.video__play-pause {
	position:relative;
	bottom:0;
	padding:4px; /* [1] */
	background:transparent;
	color:inherit;
	font:200 28px/1 "Myriad Pro", Arial, Helvetica, sans-serif;
	text-transform:none;
	transition:bottom 0.5s ease-in-out;
}
.video__play-pause:hover,
.video__play-pause:focus {
	outline:none;
	background:transparent;
	color:inherit;
}
.video__play-pause:before {
	display:inline-block;
	width:22px;
	height:22px;
	margin-right:8px;
	border-radius:50%;
	background:#e30040 url(/gui/i/play.svg) 9px 50% no-repeat;
	content:"";
	vertical-align:-1px;
}
.video__play-pause:hover:before,
.video__play-pause:focus:before {
	box-shadow:0 0 0 4px #f79fbe;
}


/* MQ: max-width:768px
----------------------------------------------------------------------------- */
@media only screen and (max-width:768px) {
	.video__play-pause:before {
		vertical-align:-4px;
	}
} /* End media query */


/* =============================================================================
 * Links and buttons
============================================================================= */


/* Read more
----------------------------------------------------------------------------- */

.splash .read-more{
	line-height:1!important;
}

.read-more {
	display:inline-block;
	padding:0;
	background:transparent !important;
	color:#e30040 !important;
	transition:color 0.2s ease-in-out;
}
.read-more:after {
	display:inline-block;
	width:6px;
	height:9px;
	margin-left:8px;
	background:url(/gui/i/arrow-right.svg) no-repeat;
	transition:margin-left 0.2s ease-in-out;
	content:"";
}
.read-more:hover,
.read-more:focus {
	color:#000 !important;
}

.read-more:hover:after,
.read-more:focus:after {
	display:inline-block;
	width:6px;
	height:9px;
	margin-left:8px;
	background:url(/gui/i/arrow-right.svg) no-repeat;
	background-position: -25px 0px;
	margin-left: 11px;
	transition:margin-left 0.2s ease-in-out;
	content:"";
}

.light-text .read-more:hover,
.light-text .read-more:focus {
	color:#fff !important;
}

.light-text .read-more:hover:after,
.light-text .read-more:focus:after{
	display:inline-block;
	width:6px;
	height:9px;
	margin-left:8px;
	background:url(/gui/i/arrow-right.svg) no-repeat;
	background-position: -55px 0px;
	margin-left: 11px;
	transition:margin-left 0.2s ease-in-out;
	content:"";
}

.splash .light-text .read-more:hover:after,
.splash .light-text .read-more:focus:after{
	display: inline-block;
	margin-left: 8px;
	background: url(/gui/i/arrow-right.svg) no-repeat;
	background-position: -66px 0px;
	margin-left: 11px;
	transition: margin-left 0.2s ease-in-out;
	content: "";
	width: 7px;
	height: 11px;
	background-size: auto 11px;
}

.splash a:hover,
.splash a:focus,
.splash a:visited:hover,
.splash a:visited:focus,
.splash a:active{
	color:#fff;
}
/* Button
 *
 * [1] No SVG support in IE8-, so hide the arrow
----------------------------------------------------------------------------- */
a.button {
	padding:10px 14px;
	border-radius:16px;
	font:bold 11px/1 Arial, Helvetica, sans-serif;
}
a.button:after {
	display:inline-block;
	width:12px;
	height:12px;
	margin-left:8px;
	background:url(/gui/i/button-arrow.svg);
	background-size:100% auto;
	content:"";
	vertical-align:-2px;
}
.lt-ie9 a.button:after {
	display:none; /* [1] */
}
a.button:hover,
a.button:focus {
	outline:none;
	box-shadow:0 0 0 4px #f79fbe;
	background:#e30040;
}