@font-face {
	font-family: "BebasneueBold";
	src: url("fonts/BebasNeue-Regular.eot"); /* IE9*/
	src: url("fonts/BebasNeue-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
		url("fonts/BebasNeue-Regular.woff2") format("woff2"), /* chrome、firefox */
		url("fonts/BebasNeue-Regular.woff") format("woff"), /* chrome、firefox */
		url("fonts/BebasNeue-Regular.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
}

@font-face {
	font-family: "DINOT-Medium";
  src: url("fonts/7251ae7cbcc9c197274aae57493f42ad.eot"); /* IE9*/
  src: url("fonts/7251ae7cbcc9c197274aae57493f42ad.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
	  url("fonts/7251ae7cbcc9c197274aae57493f42ad.woff2") format("woff2"), /* chrome、firefox */
	  url("fonts/7251ae7cbcc9c197274aae57493f42ad.woff") format("woff"), /* chrome、firefox */
	  url("fonts/7251ae7cbcc9c197274aae57493f42ad.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
	  url("fonts/7251ae7cbcc9c197274aae57493f42ad.svg#DINOT-Medium") format("svg"); /* iOS 4.1- */
}

@import url(//db.onlinewebfonts.com/c/ebced14106f874979db9a35d284bc6da?family=Built+Titling);

@font-face {
  font-family: "Built-Titling";
  src: url("fonts/ebced14106f874979db9a35d284bc6da.eot");
  src: url("fonts/ebced14106f874979db9a35d284bc6da.eot?#iefix") format("embedded-opentype"),
      url("fonts/ebced14106f874979db9a35d284bc6da.woff2") format("woff2"),
      url("fonts/ebced14106f874979db9a35d284bc6da.woff") format("woff"),
      url("fonts/ebced14106f874979db9a35d284bc6da.ttf") format("truetype");
}



html {
	font-size: calc(8px+118vw);
}

/* body, html {
  min-height: 100%;
} */

/* This sets mostly all the colours, including the background of the hexs to match their respective row */
.vision .hex, .vision .hex-button:hover .hex-icon-container g, .vision .hex-button:focus .hex-icon-container g, .vision .open .hex-icon-container g {fill: #01043f;}
.context .hex, .context .hex-button:hover .hex-icon-container g, .context .hex-button:focus .hex-icon-container g, .context .open .hex-icon-container g {fill: #020659;}
.strategy .hex, .strategy .hex-button:hover .hex-icon-container g, .strategy .hex-button:focus .hex-icon-container g, .strategy .open .hex-icon-container g {fill: #020873;}
.implement .hex, .implement .hex-button:hover .hex-icon-container g, .implement .hex-button:focus .hex-icon-container g, .implement .open .hex-icon-container g {fill: #030a8c;}
.experts .hex, .experts .hex-button:hover .hex-icon-container g, .experts .hex-button:focus .hex-icon-container g, .experts .open .hex-icon-container g {fill: #030ba6;}
.consults .hex, .consults .hex-button:hover .hex-icon-container g, .consults .hex-button:focus .hex-icon-container g, .consults .open .hex-icon-container g {fill: #040dbf;}
.action .hex, .action .hex-button:hover .hex-icon-container g, .action .hex-button:focus .hex-icon-container g, .action .open .hex-icon-container g {fill: #040fd9;}

.vision {background: rgba(1, 4, 64, 0.9);}
.context {background: rgba(2, 6, 89, 0.9);}
.strategy {background: rgba(2, 8, 115, 0.9);}
.implement {background: rgba(3, 10, 140, 0.9);}
.experts {background: rgba(3, 11, 166, 0.9);}
.consults {background: rgba(4, 13, 191, 0.9);}
.action {background: rgba(4, 15, 217, 0.9);}
footer {background: #fff;}

.vision .hex-button:hover i/*, .vision h4.collapse-title*/ {color: #01043f;}
.context .hex-button:hover i/*, .context h4.collapse-title*/ {color: #020659;}
.strategy .hex-button:hover i/*, .consults h4.collapse-title*/ {color: #020873;}
.strategy .hex-button:hover i/*, .strategy h4.collapse-title*/ {color: #030a8c;}
.implement .hex-button:hover i/*, .implement h4.collapse-title*/ {color: #030ba6;}
.experts .hex-button:hover i/*, .action h4.collapse-title*/ {color: #040dbf;}
.consults .hex-button:hover i/*, .action h4.collapse-title*/ {color: #040fd9;}


h1.phac{color:#fff;}
h2.phac{color:#ced3ff;}
h3.phac{color:#fff;}
h4.phac{color:#ced3ff;}

body {
  overflow-x: hidden;
  background-color: #0a0fbd!important;
  font-family: "DINOT-Medium", helvetica, arial, sans-serif;
  background-image: url(images/header-final.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center -10vh;
}

.ie body {
  font-family: helvetica, arial, sans-serif;
}

/* just tryin somethin out here
	body:before {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	width: 100%;
	height: 0%;
	background: url(images/header-2.jpg) no-repeat;
	background-size: 100%;
    background-position: center -9vh;
	animation: pulse 2s infinite;
	opacity: 0.4;
}

@keyframes pulse {

  20% {
	  height: 0%;
  }
  50% {
	height: 100%;
		bottom: 100%;
  }
  70% {
	  height: 0%;
  }

}
*/

a {
  color: #030ba6;
}

main a {
  text-decoration: underline;
}

p, ul, li {
	font-size: 1.1rem;
}

.darkbg {
  font-size: 1.4rem;
}

.row.elem, .elem svg {
  background-color: #008bac;
}

.row.impl, .impl svg {
  background-color: #00acc8;
}

h1.phac{
  text-align: left;
  font-size: 6.5rem;
  letter-spacing: 0.4rem;
  font-family:"Built-Titling";
  text-transform: uppercase;
}

h2.phac{
  text-align: left;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  font-family:Arial, Helvetica, sans-serif;
  text-transform: uppercase;
}

h3.phac{
  text-align: left;
  font-size: 2.5vw;
  letter-spacing: 0.3rem;
  font-family: "Built-Titling";
  text-transform: uppercase;
}

h3.button-title, .button-title{
  text-align: left;
  color:white;
  font-size: 1.2rem;
  font-size: calc(0.7rem + 0.5vw);
  font-weight: lighter;
  font-family:Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  transform: translateY(0.6rem);
}

h3.carousel-title{
  font-family: "DINOT-Medium", Arial, Helvetica, sans-serif;
  size: 1.1rem;
  text-transform: uppercase;
  font-weight: bolder;
  letter-spacing: 0.1rem;
}

h4.phac{
  text-align: left;
  font-size: 1.3rem;
  letter-spacing: 0.1rem;
  font-family: Arial, Helvetica, sans-serif;
}

p.phac{
  color: white;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
}

h4.targ{
  text-align: left;
  text-transform: uppercase;
  font-family:Consolas, monaco, monospace;
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
}

h4.nocap{
  text-align: left;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 1.4rem;
}

h4.quote{
  text-align: left;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  font-weight: bolder;
}

p.targ{
  color: black;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
}

p.def{
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  text-align: left;
  font-size: 1.2rem;
}

h4.collapse-title {
  text-align: left;
  font-size: 2.7rem;
  font-family: "Built-Titling";
  text-transform: uppercase;
  color: white;
  letter-spacing: 0.3rem;
  padding-left: .5rem;
  padding-top: 0.15rem;
}

h4.video-title{
  font-family: "Built-Titling";
  text-transform: uppercase;
  color: #01043f;
  font-size: 2.3rem;
  letter-spacing: 0.1rem;
}

.glance {
  font-size: 1.2rem;
  background: white;
  color: #01043f;
  padding: 1rem;
  border-radius: 1rem;
}

.glance p {
  margin-bottom: 0;
}
.collapse-title-box h4 {
  background-color: rgb(3,13,191);
  width: 100%;
  line-height: 3.5rem;
}

blockquote{
  margin: 1rem 2rem;
  padding: 0.5rem 1rem;
}

div.carousel-item p {
  font-size: 1.05rem;
  font-family: Arial, Helvetica, sans-serif;
}

.temph {
    padding: 0;
	margin: 1rem -1rem;
}

.img-container {
    display: flex;
    align-items: center;
}

.img-container img {
	margin: auto;
}

.img-fluid {
  width: max-content;
  height: auto;
}

.ie .img-fluid {
  width: -ms-max-content;
  width: 100%;
}

/*
.img-fluid:hover{
  color: #424242;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in;
opacity: 1;
transform: scale(1.5);
-ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
} */

.img.left{
  float: left;
  /* height: 67%; this stretches the images in IE, if you do just width it should scape proportionately. */
  width: 67%;
  padding-right: 0.5rem;
}

.img.right{
  float: right;
  /* height: 67%; this stretches the images in IE, if you do just width it should scape proportionately. */
  width: 67%;
  padding-left: 0.5rem;
}

.btn-primary {
  background-color: rgb(3,13,191);
  text-transform: capitalize;
  font-size: 1.3rem;
  width: 13rem;
  height: 3rem;
}

.emph {
	font-size: 1.2rem;
    margin-left: -35px;
    margin-right: -35px;
    padding: 1rem 2rem;
    margin-bottom: 0;
    color: white;
    background: #030ff6;
	margin: 1rem -35px;
}

.emph i {
	font-size: 2rem;
}

.emph .row {
	padding: 0.5rem 0;
}


ol.phase {
  padding-left: 1.7rem;
}

ol.phase li {
  color: black;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
}

/* .carousel-control-prev {
  margin-left: -3.5rem;
}

.carousel-control-next {
  margin-right: -1rem;
}

.carousel-inner{
  margin-left: -1.25rem;
} */


ol.carousel-indicators{
  margin-bottom: -1.4rem;
}

.carousel-indicators li{
  background-color: rgb(14, 132, 161)
}

.caret{
  color:black;
  font-size: 3rem;
}

/* .jumbotron-fluid {
  color: hex(#0e5160);
  background-image: url("header.png");
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
} */

.nav-item{
  color:white;
  font-size: 1.4rem;
  font-family:Consolas, monaco, monospace;
}

.nav-search {
  position: relative;
}

.nav-search input {
  text-indent: 16px;
}

.nav-search .fa-search {
  position: absolute;
  top: 12px;
  left: 10px;
  font-size: 15px;
}

.ovl {
    opacity: 0;
}

.ovl:hover{
    opacity: 1;
    background: rgb(0,0,0,0.6);
    transition-duration: 700ms;

}

.card.text-white{
      margin: 0 auto;
      float: none;
  }

.card-body{
  margin-bottom: 1rem;
}

/* .card-body.offset{
  transform: translateX(9rem);
  width: 45rem;
} */

.card-text .card-title{
    color: white;
}


.hexagon {
	background:transparent;
	display:inline-block;
	height:3.45rem;
	position:relative;
	width:6rem;
	margin: 2rem 0;
	border: 0;
}

/* not needed with svg buttons?
.hexagon:before {
	border-bottom:1.725rem solid black;
	border-left:3rem solid transparent;
  border-right:3rem solid transparent;
  top:-2.3rem;
	content:'';
  left:0;
  border: 0;
	position:absolute;
}

.hexagon:after {
	border-left:3rem solid transparent;
	border-right:3rem solid transparent;
	border-top:1.725rem solid black;
	bottom:-2.3rem;
	content:'';
  left:0;
  border: 0;
	position:absolute;
}

*/

/* I'm guessing that this is meant to vertically align the svg, but it shouldn't apply to all svg's (in case we use them elsewhere), and I think I found a different way to do it
svg{
  transform: translateY(-1.7rem);
} */

/* not sure what the .intro-specific formatting is for

.intro{
  background:transparent;
  display:inline-block;
	height:3.45rem;
	position:relative;
  width:6rem;
  margin-bottom: 2rem;
  border: 0;
}

.intro::before{
  border-bottom:1.725rem solid black;
	border-left:3rem solid transparent;
  border-right:3rem solid transparent;
  top:-2.3rem;
	content:'';
  left:0;
  border: 0;
	position:absolute;
}



.intro::after{
  border-left:3rem solid transparent;
	border-right:3rem solid transparent;
	border-top:1.725rem solid black;
	bottom:-2.3rem;
	content:'';
  left:0;
  border: 0;
	position:absolute;
} */

/* .intro:hover{
  background-image:url("Buttons/H Intro.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
} */

.timeline-item{
  margin-bottom:3rem;
}

header {
	padding: 2rem 0;
}

.header {
	/*background-image: url('header-final.jpg');
	background-repeat: no-repeat;
	background-size: cover;
    background-position: center 14%;*/
	min-height: 200px;
	height: 25vh;
	max-height: 400px;
    display: flex;
    align-items: center;
}

.section {
    padding: 2rem 0;
    display: flex;
    align-items: center;
}

.section-title {
    height: 100%;
    display: flex;
    align-items: center;
}

.section-title h3.phac {
	line-height: 100%;
}

.hex-col {
	position: relative;
}

.hex-col:before {
	content: "";
	height: calc(100% + 4rem);
	width: 1px;
	background: white;
	position: absolute;
	left: 3.5rem;
	top: -2rem;
}

.vision .hex-col:before {
	height: 100%;
  top: 2rem;
}



svg {
	overflow: visible;
	height: 5rem;
	width: 5rem;
}




.hex {

	stroke: #ffffff;
	stroke-width: 5px;
	stroke-miterlimit:10;
	-webkit-transition: fill 500ms, stroke-width 250ms; /* For Safari 3.1 to 6.0 */
	transition: fill 500ms, stroke-width 250ms;
}

.hex-button {
	height:5rem!important;
	width:auto!important;
	margin: 2rem 0!important;
	padding: 0!important;
	position:relative;
  display: flex!important;
  text-decoration: none;
}

.hex-button i {
	color: white;
	line-height: 5rem;
	font-size: 2.5rem;
	margin-left: -3.7rem;
	-webkit-transition: font-size ease-out 250ms; /* For Safari 3.1 to 6.0 */
	transition: font-size ease-out 250ms;
}

.hex-icon-container img {
	width: 3rem;
	margin-top: 1rem;
	-webkit-transition: width ease-out 250ms, margin-top ease-out 250ms; /* For Safari 3.1 to 6.0 */
	transition: width ease-out 250ms, margin-top ease-out 250ms;
	position:relative;
}

.hex-button:hover {
  cursor:pointer;
}

.hex-button:hover .hex, .open .hex, .hex-button:focus .hex {
	fill: #fff;
	stroke-width: 10px;
}
.open:before {
  content: "";
  height: 94px;
  width: 82px;
  background-image: url(images/openhex.svg);
  background-repeat: no-repeat;
  position: absolute;
  margin-top: -6px;
  margin-left: -0.1rem;
  animation: appear 500ms forwards ease-in, breath 2s infinite linear;
  opacity: 0;
}

@keyframes breath {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.05, 1.05);
  }
  100% {
    transform: scale(1, 1);
  }
}

@keyframes appear {
  from {
    opacity: 0;
    transform: rotate(0deg);
  }
  to {
    opacity: 1;
    transform: rotate(360deg);
  }
}

.open2:hover svg g, .open2:focus svg g {
	display: none;
}

.open2:hover .hex-icon-container:after, .open2:focus .hex-icon-container:after  {
	content: "x";
	font-family: sans-serif;
	position: absolute;
	font-size: 30px;
	line-height: 5rem;
	width: 5rem;
	left:  0;
}

.open {
  position: -webkit-sticky;
  position: sticky;
	top: 20px;
}

.hex-button:hover i {
	font-size: 3rem
}

/* styling for the hex icons from icons8 */
.hex-icon-container svg {
    height: 5rem;
    width: 3.5rem;
	-webkit-transition: width ease-out 150ms; /* For Safari 3.1 to 6.0 */
	transition: width ease-out 150ms;
}
.hex-icon-container g {
	fill: white;
}

.hex-button:hover .hex-icon-container svg, .open .hex-icon-container svg, .hex-button:focus .hex-icon-container svg {
	width: 4rem;
}

.shrink-icon {
  height: 2.5rem!important;
  width: 3.5rem;
  margin-top: 1.25rem;
}

.hex-button:hover .shrink-icon, .open .shrink-icon, .hex-button:focus .shrink-icon {
  height: 3rem!important;
  margin-top: 1rem;
}

.hex-button:hover img, .open .shrink-icon, .hex-button:focus img {
	width: 3.5rem;
	margin-top: 0.75rem;
}

.hex-button:hover .invert, .open .invert, .hex-button:focus .invert {
	filter: invert;
	-ms-filter: invert;
	filter: invert(0%);
	-webkit-filter: invert(0%);
	filter: brightness(1)
}

.hex-button h3 {
	line-height: 5rem;
  margin: -0.5rem 0 0 0.5rem;
  text-decoration: none;
}

.hex-button h3:after {
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  left: 0;
  bottom: 1.5rem;
  visibility: hidden;
  background-color: #fff;
  -webkit-transition: all .1s ease;
  transition: all 0.3s ease;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  	-webkit-clip-path: polygon(5% 25%, 5% 75%, 50% 100%, 95% 75%, 95% 25%, 50% 0%);
	clip-path: polygon(5% 25%, 5% 75%, 50% 100%, 95% 75%, 95% 25%, 50% 0%);

}

.hex-button:hover h3:after, .open h3:after, .hex-button:focus h3:after {
  visibility: visible;
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

.hex-icon-container {
	height: 5rem;
	width: 5rem;
	overflow: hidden;
	margin-left: -5rem;
	text-align: center;
	-webkit-clip-path: polygon(5% 25%, 5% 75%, 50% 100%, 95% 75%, 95% 25%, 50% 0%);
	clip-path: polygon(5% 25%, 5% 75%, 50% 100%, 95% 75%, 95% 25%, 50% 0%);
}





.hex-icon-container i {
	margin-left: 0;
}

.invert {
	filter: invert(100%);
	-webkit-filter: invert(100%);
}

.expanded-content {
	position: fixed;
	right: 0;
	bottom: 0px;
	height: 70vh;
	overflow: scroll;
	background: white;
	padding: 2rem;
}

.tent {
	width: 40vw;
	height: 70vh;
	border: 0;
}


.btn.focus, .btn:focus {
	box-shadow: none!important;
}

.card {
	border: 0;
}

footer {
  color: #000;
  position: relative;
  padding: 2rem 0;
}

.footer-content {
  display: flex;
  flex-direction: row;
}

.footer-content .contact-container {
  flex: 0 0 50%;
  padding-left: 30px;
}

.footerlinks > a {
  font-size: calc(0.5rem + 0.4vw);
  padding: 1rem;
  margin: 0 auto;
  color: black;
  text-transform: uppercase;
}

.footerlinks {
  margin-left: auto;
  flex: 0 0 48%;
  flex-direction: column;
  display: flex;
  align-items: flex-start;
}

.footerlinks div {
  padding: 1rem 0;
}

footer iframe {
  overflow: hidden;
  margin-left: -4rem;
}

.contact-link {
  position: relative;
}
.contact-link:hover {
  cursor: pointer;
}

.contact-link:before {
  content: "";
  background: black;
  height: 15px;
  width: 24px;
  position: absolute;
  margin-left: -30px;
  border-radius: 50%;
  top:50%;
  margin-top: -7px;
}


.contact-iframe-container {
  display: flex;
}

.bottom-bar {
  fill: #fff;
  width: 3755px;
  height: 3rem;
  position: absolute;
  left: 48%;
  top: 0;
  margin-left: -1877.5px;
  z-index: 2;
  margin-top: -1rem;
}

.bottomer-bar {
  fill: #007bff;
  width: 3755px;
  height: 3rem;
  position: absolute;
  left: 48%;
  top: 0;
  margin-left: -1877.5px;
  z-index: 0;
  margin-top: -1rem;
}

footer h2.phac {
  color: #000;
}

footer a:hover, footer a:focus {color: #01043f;}

.footerp {
	max-width: 600px;
	width: 33vw;
  font-size: 1rem;
}

.header {
	position: relative;
}

.white-bar {
	fill: white;
	width: 3755px;
	height: 3rem;
	position: absolute;
	left: 48%;
    bottom: 0;
    margin-bottom: -1rem;
    margin-left: -1877.5px;
    z-index: 2;
}



.vision {
  padding-top: 4rem!important;
  margin-top: -1rem;
}

.first-category {
  clip-path: polygon(0% 1rem, 0% 100%, 100% 100%, 100% 0%, 50.5% 0%, 48% 1rem);
}

.module-module-module {
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.module {
	-ms-flex: 0 1 100%;
    flex: 0 1 100%;
	-ms-flex-preferred-size: 33.333%;
    flex-basis: 33.333%;
    max-width: 33.333%;
	padding: 0 1rem;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    margin-top: 4.5rem;
}

.carousel-indicators {
	top: 0;
	bottom: auto;
}

.carousel-control-prev:focus span, .carousel-control-next:focus span{
  border-left: 3px solid white;
}

.carousel-control-prev:focus, .carousel-control-next:focus{
  opacity: 1;
}

.carousel-indicators li {
	background-color: white;
}

.carousel {
  margin: 0 -36px -35px -36px;
}

#whatweheard, #whatweheard .carousel-item {
  min-height: auto;
}

#sixthemes .carousel-item {
  min-height: 891px;
}

.darkbg {
    background: #01043f;
    color: white;
    margin: 1rem -35px;
    padding: 2rem;
}

#datadef h2 {
  display: none;
}

.carousel-item {
	background: rgb(1,6,89);
	color: white;
  padding: 4rem;
  width: 100%;
}

.carousel-item h4.collapse-title {
    color: rgb(1,6,89);
    background: white;
    border-radius: 10px;
    padding: 0.5rem;
    text-align: center;
	position: relative;
	margin-bottom: 2rem;
}

.print-message {
  display: none;
  
  background: orange!important;
  padding: 1rem!important;
  position: absolute;
  top: 1rem;
}

.carousel-item h4.collapse-title:before {
	content: "";
	padding: 10px 16px;
	background: white;
	position: absolute;
	left: 0;
	bottom: 0;
	margin-bottom: -8px;
    -webkit-clip-path: polygon(0% 100%, 100% 0%, 0% 0%);
    clip-path: polygon(0% 100%, 100% 0%, 0% 0%);
}

.carousel-control-next, .carousel-control-prev {
	width: 10%;
	align-items: start;
  opacity: 1;
}

.carousel-control-prev:hover, .carousel-control-next:hover {
  cursor: pointer;
}

strong {
  font-weight: bold;
}

/*.card-col {*/
.card {
  max-width: 800px;
  margin: auto 10vw auto auto;
  width: 45vw;
}

.pop-out:hover {
  cursor: pointer;
}


@media only screen and (max-width: 1600px) {
  .card {
    margin: auto 5vw auto auto;
  }
}

@media only screen and (max-width: 1300px) {
  .section-col {
    position: relative;
    flex: 6%;
    max-width: 6%;
  }
  .section-col h3.phac {
  	transform-origin: 0 0;
  	transform: rotate(-90deg);
  	font-size: 1.2rem;
  	width: 240px;
  	position: absolute;
  	text-align: center;
    margin-top: 120px;
  }
  .card {
    margin: auto 2.5vw auto auto;
    width: 50vw;
  }
}

@media only screen and (max-width: 1000px) {
  .card {
    margin: auto 0 auto auto;
  }
}

@media only screen and (max-width: 900px) {
  .card {
    margin: auto 0 auto -2vw;
    width: calc(80vw - 2.5rem);
  }
}




#whoengaged {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

.ie #whoengaged {
  list-style-position: inside;
}

.clickable-img:hover:before, .clickable-img:focus:before {
  content: "click to enlarge";
  position: absolute;
  top: 0px;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  opacity: 1;
  font-size: 2rem;
  text-align: center;
  color: white;
}

#enfrançais .clickable-img:hover:before, #enfrançais .clickable-img:focus:before {
content: "Cliquez pour agrandir";
}

.clickable-img {
	position: relative;
	display: block;
}


header h1, header h2.phac, header h4.phac {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-shadow: 0 0 7px #01004e, 0 0 7px #01004e, 0 0 7px #01004e;
	color: white;
}

header h1.phac {
	font-size: calc(4rem + 4vh);
	line-height: calc(4rem + 4vh);
	margin: 0 0 0 -2px;
}

#enfrançais header h1.phac {
  font-size: calc(2rem + 4vh);
  line-height: calc(3rem + 4vh);
}

#enfrançais header h4 {
  margin-top: -8px;
}

header h2.phac, header h4.phac {
	font-size: calc(1rem + 0.6vh);
	line-height: calc(1rem + 0.6vh);
	margin-bottom: 0;
}

header h4 {
	margin-top: -4px;
}

.lang {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
}

.lang a {
  background: #fff;
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  margin: 0;
  display: inline-block;
  text-align: center;
  color: #030ff6;
  clip-path: polygon(0 20%, 10% 0%, 100% 0%, 100% 80%, 90% 100%, 0% 100%);
  text-decoration: none;
}

.lang a:hover, .lang a:focus { 
  background: #000;
  color: white;
}

#whatweheard .clickable-img {
  margin-bottom: 2rem;
}

#enfrançais #whatweheard .clickable-img img{
  filter: brightness(100);
}

/*#enfrançais #whatweheard .clickable-img:before {
  content: "This image is out for translation";
  width: 100%;
  line-height: 2rem;
  font-size: 1.5rem;
  text-align: center;
  height: 100%;
  color: black;
  padding: 2rem;
  position: absolute;
  z-index: 99;
}*/

.bold-gc {
  font-weight: 800;
  font-family: sans-serif;

}

main {
  position: relative;
}

#gcpediafooter {
  display: flex;
  flex-direction: row;
  background-color: white;
  justify-content: center;
  position: relative;
  font-size: 0.8rem;
  margin-top: 3rem
}

.gcpediaLink{
  padding: 0.5rem 1rem;
}

.themeHeaders {
  width: 70%
}

#searchingBG, #searchModedies {
  background: #000000aa;
  position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: 3;
  top: 0;
  display: none;
  color: white;
  line-height: 100vh;
  padding-left: 10vw;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px); 
}

.ie #searchingBG, .ie #searchModedies {
  background: #000;
  opacity: 0.7;
}

.card {
  z-index: 4;
}


.searchmodeTitle {
  font-size: 2rem;
}

.date {
  font-size: 0.8rem;
  line-height: 1.5rem;
  display: block;
  color: white;
  text-align: center;
  margin-right: 1rem;
  text-shadow: 0 1px 1px #00000099;
}

.expandCollapse {
  color: white!important;
  position: absolute;
  font-size: 0.9rem;
  z-index: 3;
  margin: 0.3rem 0.6rem;
  right: 0;
  /*display:none;*/
}

.expandAll:before {
  content: "+ ";
}

.collapseAll:before {
  content: "- ";
}

.expandCollapse:hover {
  cursor: pointer;
}

.collapseAll {
  display: none;
}

#presidentsvideo {

}

.plantheme {
  width: 100%;
  height: 1800px;
  overflow: hidden;
  border: 0;
  margin-top: -70px;
}

#enfrançais .plantheme {
    height: 2200px;
}

#plancontainer {
  margin: 0 -35px;
}

#plancontainer .carousel-item {
  padding: 0;
  height: 2200px;
}



@media print {
  .collapse {
    /* display: block !important; enable to display all for printing */
    height: auto !important;
  }

  .section-col,
  .hex-col {
    display: none;
  }

  .collapse {
    margin-left: 0;
    margin-right: auto;
  }

  .print-message {
    display: block;

    background: orange !important;
    padding: 1rem !important;
    position: absolute;
    top: 0;
    border: 6px solid orange;
    font-size: 20px;
    margin-top: -20px;
  }

  .card {
    margin: 0;
    width: 100%;
    padding-right: 8%;
  }

  .carousel-item {
    color: black;
    display: block;
    page-break-after: always;
    padding: 100px;
  }


  .carousel-indicators {
    display: none;
  }

  .item {
    display: block;
  }

  .carousel-item {
    page-break-after: always;
  }



  #whatweheard,
  #whatweheard .carousel-item {
    height: auto;
  }

  .carousel-inner {
    display: flex;
    flex-direction: column;
  }

  #sixthemes,
  #sixthemes .carousel-item {
    height: auto;
  }

  body {
    padding-top: 40px;
  }


  footer,
  #gcpediafooter {
    display: none !important;
  }
}

#meetthehub {
  padding: 1vw;
  width: 100%;
}

#meetthehub a {
  display: flex;
  flex-direction: row;
}

#meetthehub-expanded {
  max-width: 70ch;
}


#meetthehub svg {
  height: 2rem;
  width: 2rem;
}

#meetthehub h3 {
  color: black;
  font-size: 1.6rem;
  line-height: 2rem;
  position: relative;
  padding-left: 1rem;
}

#godataweek a {
  background: #030ff6;
  font-size: 1.2rem;
  padding: 0.5rem 1rem;
  margin: 0;
  display: inline-block;
  text-align: center;
  color: #fff;
  clip-path: polygon(0 20%, 4% 0%, 100% 0%, 100% 80%, 96% 100%, 0% 100%);
}

#godataweek a:hover {
  text-decoration: none;
  background: #007bff;
}

.brightbg {
  background: linear-gradient(rgba(255, 255, 255, 0.6), white);
  margin-top: -1rem;
  padding: 2rem 0;
}

.brighterbg {
  background: #fff;
  margin-top: -1rem;
  padding: 2rem 0;
}

#agenda ul {
  margin: 0;
  padding: 0;
}

#agenda li {
  display: flex;
  flex-direction: column;
  line-height: 1.5rem;
  margin: 1.5rem 0;
}

#agenda h2 {
  text-transform: uppercase;
  color: #020873;
}

#agenda {
  font-family: helvetica, arial, sans-serif;
}

#agenda a {
  color: black;
}

#agenda h1 {
  text-transform: uppercase;
  color: #01043f;
  border-bottom: 4px solid #01043f;
}

.event-nam {
  font-weight: 500;
}

.time {
  font-weight: 100;
}

#portal {
  background: transparent;
  padding: 0;
  margin: calc(1.5rem + 1.5vw) auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  width: 100vw;
}

#words {
  display: flex;
  flex-direction: column;
}

#words span {
  font-size: calc(2rem + 2vw);
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: -3px;
  line-height: calc(2rem + 2vw);
}

#landing h1.phac {
  font-size: calc(2rem + 2vh);
}

#landing-buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 1rem;
}

#landing-buttons a:first-child{
  margin-right: 2rem;
}

.hextangle {
  background: #030ff6;
  font-size: 1.2rem;
  padding: 0.5rem 1rem;
  margin: 0;
  display: inline-block;
  text-align: center;
  color: #fff;
  clip-path: polygon(0 20%, 4% 0%, 100% 0%, 100% 80%, 96% 100%, 0% 100%);
  text-decoration: none;
}

.hextangle:hover, .hextangle:focus {
  transform: scale(1.025);
  text-decoration: none;
  color: white;
  background: #000;
}

.hextangle.light {background: #535cfa;}
.hextangle.light:hover {background: #000;}



.one { color: #535cfa;}
.two {color: #101ad4}


/*
#landing .header {
  height: 7.25vh;
  min-height: 70px;
}

#landing h1.phac {
  font-size: calc(2rem + 2vh);
  line-height: calc(2rem + 2vh);
}

#landing main {
  min-height: 79vh;
}*/

.doc-embed {
  height: 2500px;
  min-height: 800px;
  margin: 0 0 0 2rem;
}

.vis {
  height: 31.38rem;
  width: 25.02rem;
  background: url(images/landing-vis.png) no-repeat;
  background-size: 100%;
  padding: 3rem;
}

#gosomewhere {
  display: flex;
  flex-direction: column;
}

#landing main {
  display: flex;
  align-items: center;
  flex-direction: column;
}

#animation iframe {
  display: flex;
  margin: 2rem auto;
}