@font-face {
	font-family: 'Guardian Sans';
	src:  url('/embed-page/transformation-framework/font/GuardianTextSans-Bold.woff');
	font-weight: bold;
}
@font-face {
	font-family: 'Guardian Egyptian';
	src:  url('/embed-page/transformation-framework/font/guardian-egyptian.woff');
}

.transformation-wrapper *{
	position: relative;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	overflow-anchor: none;
}
body {
	background: #011c43;
	font-family: 'Guardian Sans';
}

/********* DEV ONLY **********/

#refresh_notice {
	background: #5ADEF4;
	color: #212121;
	text-align: center;
	font-size: 1vw;
	padding: 5px;
}

#header {
	width: 100vw;
	padding: 20px 40px;
	background: rgba(1, 28, 67, .5);
	z-index: 1;
}
#header_logo {
	display: inline-block;
	vertical-align: middle;
	height: 42px;
	margin-right: 50px;
}
#header_menu {
	display: inline-block;
	vertical-align: middle;
	list-style: none;
	padding: 0;
	margin: 0;
	text-indent: 0;
	font-family: 'Guardian Sans';
	color: #fff;
	font-weight: bold;
}
#header_menu li {
	display: inline-block;
	vertical-align: middle;
	list-style: none;
	padding: 5px 20px;
	margin: 0;
	text-indent: 0;
}

/***************************/

#loop_video {
	z-index: 0;
}
#vid_wrap {
	width: 100vw;
	background-color: #011c43;
	background-image: url(/embed-page/transformation-framework/img/loop-poster.jpg);
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	padding: 56.25% 0 0 0;
	position: relative;
	overflow: hidden;
}
#vid_wrap iframe,
#vid_wrap object,
#vid_wrap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.hud_arrow {
	position: absolute;
	top: 1vw;
	height: 2.6vw;
	opacity: 0;
	transition: all linear 250ms;
	z-index: 2;
}
#hud_arrow_left {
	left: 0;
	cursor: pointer;
	transition: all linear 250ms;
	opacity: 0;
	z-index: -1;
}
.node_selection #hud_arrow_left {
	opacity: 1;
	z-index: 2;
}
.node #hud_arrow_left {
	opacity: 1;
	z-index: 2;
}
#hud_arrow_left:hover {
	transform: scale(1.05, 1.05);
}
#hud_arrow_right {
	right: 0;
}

.node_selection .hud_arrow {
	opacity: 1;
}
.node .hud_arrow {
	opacity: 1;
}

#hud_hexes {
	position: absolute;
	top: 2.2vw;
	right: 0.5vw;
	z-index: -1;
	opacity: 0;
}
.node_selection #hud_hexes {
	opacity: 1;
	z-index: 3;
}
.node #hud_hexes {
	opacity: 1;
	z-index: 3;
}

#hud_hexes img {
	width: .8vw;
	display: inline-block;
	margin: -1vw 0.4vw 0 0;
	height: auto;
	transition: all linear 250;
}
.node #hud_hexes img {
	animation: hex_pulse 2s infinite;
}
#hud_hexes img:hover {
	animation: none;
	transform: scale(1.35, 1.35);
}

#hud_hexes img.small_strand_icon {
	margin-bottom: 0.1vw;
}

#hud_header {
	position: absolute;
	left: 0;
	top: 0.7vw;
	width: 100vw;
	margin: 20px 0;
	text-align: center;
	z-index: 1;
}
#hud_header_title {
	text-align: center;
	color: #fff;
	font-size: 3vw;
	line-height: 1em;
	font-family: 'Guardian Egyptian';
}
.hud_header_subtext {
	width: 70vw;
	margin: auto;
	padding: .7vw;
	font-family: display-egyptian-light, sans-serif;
	font-size: 1.1vw;
	color: #fff;
	transition: all linear 250ms;
	display: none;
}

.small_loop #hud_header_subtext_1 {
	display: block;
}
.node_selection #hud_header_subtext_2 {
	display: block;
}
.diving #hud_header_subtext_3 {
	display: block;
}
.node #hud_header_subtext_3 {
	display: block;
}

#vid_footer_text {
	position: absolute;
	width: 15vw;
	height: auto;
	margin: auto;
	left: 50%;
	margin-left: -7.5vw;
	bottom: 22%;
	display: block !important;
	color: #fff !important;
	font-family: display-egyptian-light, sans-serif;
    font-size: 1.6rem !important;
    letter-spacing: 0.9px !important;
    line-height: 1.43 !important;
    text-transform: uppercase !important;	
	transition: all linear 150ms;
	cursor: pointer;
	opacity: 0;
	z-index: 2;
}
.small_loop #vid_footer_text {
	opacity: 1;
}
#vid_footer_text:hover {
	transform: scale(1.05, 1.05);
}

.node_icon {
	opacity: 0;
	text-align: center;
	position: absolute;
	text-decoration: none;
	transition: all linear 250ms;
	cursor: pointer;
	z-index: 1;
}
.node_selection .node_icon {
	opacity: 1;
	z-index: 2;
}

#node_icon_1 {
	top: 30%;
	left: 27.5%;
}
#node_icon_2 {
	top: 70%;
	left: 27.5%;
}
#node_icon_3 {
	top: 30%;
	right: 27.5%;
}
#node_icon_4 {
	top: 70%;
	right: 27.5%;
}

.node_hex {
	position: absolute;
	top: 0;
	left: 0;
	height: 6.8vw;

	transform: scale(1);
	animation: hex_pulse 2s infinite;
}

@keyframes hex_pulse {
	0% {
		transform: scale(0.95);
	}

	70% {
		transform: scale(1);
	}

	100% {
		transform: scale(0.95);
	}
}
.node_hex_filled {
	position: absolute;
	top: 0;
	left: 0;
	height: 6.8vw;
	transition: all linear 250ms;
	opacity: 0;
}
.node_icon:hover .node_hex_filled {
	opacity: 1;
}

.node_text {
	position: absolute;
	width: 10vw;
	margin-left: -2.5vw;
	padding: .2vw 0;
	font-family: 'Guardian Sans';
	color: #fff;
	transition: all linear 250ms;
	font-size: 1vw;
	text-align: center;
}
#node_icon_1 .node_text {
	top: auto;
	bottom: 100%;
}
#node_icon_2 .node_text {
	top: 100%;
	bottom: auto;
}
#node_icon_3 .node_text {
	top: auto;
	bottom: 100%;
}
#node_icon_4 .node_text {
	top: 100%;
	bottom: auto;
}

.node_spacer {
	display: inline-block;
	height: 6.8vw;
	width: 4.9vw;
}

.strand {
	text-align: center;
	position: absolute;
	text-decoration: none;
	transition: all linear 250ms;
	font-family: 'Guardian Sans';
	color: #ffffff;
	cursor: pointer;
	opacity: 0;
	font-size: 1vw;

	transform: scale(1);
	animation: hex_pulse 2s infinite;
}
.strand_icon_spacer {
	position: absolute;
	width: 3vw;
	left: 50%;
	margin-left: -1.5vw;
	margin-top: .3vw;
}
.strand_underline {
	position: absolute;
	top: 0px;
	left: 50%;
	width: 3vw;
	margin-left: -1.5vw;
	transition: all linear 250ms;
}
.strand:hover .strand_underline {
	opacity: 0;
}
.strand_icon_hover {
	position: absolute;
	top: 0px;
	left: 50%;
	width: 3vw;
	margin-left: -1.5vw;
	transition: all linear 250ms;
	opacity: 0;
}
.strand:hover .strand_icon_hover {
	opacity: 1;	
}

.node_selection .strand {
	opacity: 1;
	z-index: 2;
}

.strand:hover {
	transform: scale(1.07, 1.07);
}

#strand_1 {
	top: 54%;
	left: 27.4%;
}
#strand_2 {
	top: 77.5%;
	left: 45.7%;
}
#strand_3 {
	top: 54%;
	right: 25.6%;
}

#hex {
	position: absolute;
	top: 50vh;
	margin-top: -23vh;
	left: 20vh;
	height: 25vw;
	display: none;
}

#scroll_wrap {
	position: absolute;
	top: 150px;
	left: 35%;
	height: 75vh;
	width: 60vw;
	background: #011c43;
	display: none;
}

.node_col_1 {
	position: absolute;
	top: 20%;
	left: 13%;
	width: 21%;
	height: 80vh;
	padding: 2.4vw 2vw 2vw 2vw;
	background: #011c43;
	text-align: left;
	
	background: -moz-linear-gradient(top,  rgba(6,13,41,1) 51%, rgba(6,13,41,0.96) 53%, rgba(7,50,98,0) 100%);
	background: -webkit-linear-gradient(top,  rgba(6,13,41,1) 51%,rgba(6,13,41,0.96) 53%,rgba(7,50,98,0) 100%);
	background: linear-gradient(to bottom,  rgba(6,13,41,1) 51%,rgba(6,13,41,0.96) 53%,rgba(7,50,98,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#060d29', endColorstr='#00073262',GradientType=0 );

	margin-left: -10%;
	opacity: 0;
	transition: all linear 250ms;
	z-index: -1;
}
.node_col_1.content_open {
	opacity: 1;
	margin-left: 0;
	z-index: 2;
}

.node_title {
	padding: 0 0 2.2vw 0;
	color: #fff;
	font-size: 1.9vw;
	text-align: left;
	line-height: 1.2em;
}

.node_col_2 {
	position: absolute;
	top: 20%;
	left: 35%;
	height: 80%;
	width: 53%;
	margin-left: 10%;
	padding: 0 0 5vw 0;
	background: #011c43;

	background: -moz-linear-gradient(top,  rgba(6,13,41,1) 51%, rgba(6,13,41,0.96) 53%, rgba(7,50,98,0) 100%);
	background: -webkit-linear-gradient(top,  rgba(6,13,41,1) 51%,rgba(6,13,41,0.96) 53%,rgba(7,50,98,0) 100%);
	background: linear-gradient(to bottom,  rgba(6,13,41,1) 51%,rgba(6,13,41,0.96) 53%,rgba(7,50,98,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#060d29', endColorstr='#00073262',GradientType=0 );

	opacity: 0;
	transition: all linear 250ms;
	z-index: -1;

	overflow-y: scroll;
	scroll-snap-type: y proximity;
}
.node_col_2.content_open {
	opacity: 1;
	margin-left: 0;
	z-index: 2;
}

.hud_panel {
	padding: 2.4vw 3vw 0 3vw;
	font-family: 'Guardian Egyptian';
	font-size: 1.3vw;
	line-height: 1.5em;
	color: #fff;
	scroll-snap-align: start;
}
.hud_panel_title {
	font-size: 1.9vw;
	font-family: 'Guardian Sans';
	line-height: 1.2em;
	margin-bottom: 2vw;
}
.hud_panel p {
	font-size: 1.1vw;
	margin-bottom: 1.2vw;
    line-height: 1.5em;
}

.hud_panel ul, .hud_panel ol {
	margin-bottom: 1vw;
}

.hud_panel li {
	list-style: none;
	padding-left: 2vw;
}
.hud_panel li::before {
	content: '';
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0.25vw;
	background-size: contain;
	background-repeat: no-repeat;
	height: 1.3vw;
	width: 1vw;
	background-image: url("/embed-page/transformation-framework/img/bullet.png");
}

.hud_panel li {
	padding-bottom: .5vw;
	font-weight: normal;
	font-size: 1.1vw;
}
.node_col_1 a {
	display: block;
	padding: 4vw 0;
	color: #ff555f;
	font-size: 1.3vw;
	transition: all linear 150ms;
	text-align: center;
	font-family: 'Guardian Egyptian';
	font-weight: normal;
}
.hud_panel a {
	color: #ff555f;
	transition: all linear 150ms;
}
.hud_panel a:hover {
	transform: scale(1.05, 1.05);
}
.rainbow_border {
	margin: 1.2vw 0 1.2vw 0;
}
.hud_fact {
	width: 100%;
	padding: 1vw 0 1vw 3.3vw;
	position: relative;
}

.hud_fact_num {
	display: block;
	position: absolute;
	top: 50%;
	margin-top: -1.5vw;
	left: -0.4vw;
	width: 3vw;
	height: 3vw;
	/* background: #ff555f; */
	background-image: url(/embed-page/transformation-framework/img/bullet.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
	color: #fff;
	font-size: 1.5vw;
	padding-top: 0.85vw;
	margin-right: 1vw;
	line-height: 100%;
	text-align: center;
}
.hud_fact_text {
	font-size: 1.1vw;
	font-family: 'Guardian Sans';
}

#hud_panel_1 {
}
#hud_panel_2 {
}
#hud_panel_3 {
	padding: 1vw 0;
}
#hud_panel_4 {
	scroll-snap-align: none;
}

a.hud_panel_learn_more {
	display: inline-block !important;
	width: 9vw;
	color: #fff !important;
	font-family: display-sans-semibold, sans-serif !important;
    font-size: 1.6rem !important;
    letter-spacing: 0.9px !important;
    line-height: 1.43 !important;
    text-transform: uppercase !important;	
	transition: all linear 150ms;
}
a.hud_panel_learn_more:hover {
	transform: scale(1.1);
}
.node_col_1 a.hud_panel_learn_more {
}
.node_col_2 a.hud_panel_learn_more {
	margin-top: 1vw !important;
}

#node_scroll_down_angle {
	position: sticky-bottom;
	bottom: 1vw;
	font-size: 3vw;
}


/***** ITEMS ADJUSTING THE PARENT TEMPLATE ******/

/* footer > footer_content == footer_secondary */

/*
html#design2017 body.homepage.homepg2017 .footer-spacer, html#design2017 body.inside2017 .footer-spacer {
	display: none;
	height: auto;
}
html#design2017 body.homepage.homepg2017 footer .footer-secondary, html#design2017 body.inside2017 footer .footer-secondary {
	position: relative;
	height: auto;
}
*/