/*
Gold background = #BF9B30
Navy Background = #2F5597
Dark Text = #666666;
Navy text = #1f497d;
*/
body {
/* these values are taken from the Impact powerpoint presentation */
--gold: #bf9b30; 
--navy: #2F5597; 
--dark-blue1: #4472C4;
--dark-blue2: #2e75b6;
--dark-text: #666666;
--navy-text: #1f497d;
--root-font-size: 10px;
--bullet-font-size: calc(var(--root-font-size, 10px) * 6);
--bullet-size: calc(var(--bullet-font-size, 10px) * 2);

 
h1 {
   text-transform: uppercase;
   font-size: 1.8em;
   margin: 2em 0;
}

.gs-container {
    display:block;
    counter-reset: step;
    margin-top: 2em;
    margin-left: 0;
    margin-block: 0;
    padding-inline: 0;
    margin-inline: 0;
    font-size: var(--root-font-size, 10px);
}
.gs-container h4 {
    font-size: 1em;
    line-height: 1.13;
}
.gs-container .gs-item {   
    position: relative;   
    display:flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 2em;
}
.gs-step {
    border: 12em solid transparent;
    position: relative;
}
.gs-container .gs-item .gs-step:before {
   counter-increment: step;
   content: counter(step);
   /* em are relative to font setting on this selector */
   width: 2em;
   height: 2em;
   border-radius: 50%;
   display: block;
 /*  margin: 0 auto 1em auto; */
   background: var(--navy, #2F5597);
   color: #fff;
   transition: all ease-in-out 0.3s;
   text-align: center;
   font-size: 6em;
   position: absolute;
   left: -1em;
   top: -1em;
   z-index: 1;
}
.gs-container .gs-item .gs-step:after {
   content: '';
   font-size: 6em;
   width: 2.83em;
   height: 2.83em;
/*
   width: 170px;
   height: 170px;
*/
   position: absolute;
   border-top: 1px solid var(--navy, #2F5597);
   border-left: 1px solid var(--navy, #2F5597);
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
   transform-origin: top left;
   transform-box: border-box;
}
.gs-container .gs-item:before {
  
}

.gs-item .gs-text {
   border: 1px solid var(--navy, #2F5597);
   padding: 1.25em 0 0 1.25em;
   border-left-width: 0;
   height: 15em;
   flex: 1;
   font-size: 1.6em;
   line-height: 1.5;
}
.gs-item .gs-text p {
   line-height: 1.13;
   padding: 0 0 0.5em 0;
   margin: 0 0 0.5em 0;
}
.gs-container .Message_Button {
    padding: 0 0 1.25em 0;
}
.gs-container a.Button_default  {
    font-size: 0.875em;
    margin: 1em 0;
    padding: 0.64em 1.78em;
}
@media only screen and (max-width: 767px) {
    h1 {
       font-size: 1.2rem;
       margin: 1.5em 0;
    }
    .gs-container {
        font-size: 0.2rem;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
   h1 {
       font-size: 1.2rem;
       margin: 1.5em 0;
    }
   .gs-container {
        font-size: 0.5rem;
   }
}
/*
   The following is for debugging the angles
   <div class="background">
      <div class="circle"></div>
      <div class="angle"></div>
   </div>
*/
.background {
  background-color: #BCBCBC;
  width: 24em;
  height: 24em;
  padding: 0;
  margin: 0;
  position: relative;
  font-size: 10px;
}
.circle {
	width: 12em;
	height: 12em;
	border-radius: 50%;
        background-color: yellow;
	position: absolute;
	top: 6em;
        left: 6em;
}

.angle {
    width: 12em;
    height: 12em;
    border: 1px solid gray;
    border-top: 1px solid green;
    border-left: 1px solid green;
    -webkit-transform: rotate(-45deg);
    position: absolute;
    top: 12em;
    left: 12em;
    transform-origin: top left;
    transform-box: border-box;
}


/* the following are for markup that uses the bootstrap collapse pattern for accordion */
.gs-container .gs-item {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 2em;
	}
	
.gs-step[data-toggle="collapse"] {
	position: absolute;
	top: -12em;
	left: -12em;
	right: 0;
	bottom: 0;
	z-index:1;
	border: transparent 12em solid;
}
.panel.gs-item {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
	}
	
	.panel.gs-item .panel-heading {
    padding: 0;
}
.gs-container {
    display: block;
    counter-reset: step;
    margin-top: 2em;
    margin-left: 0;
    margin-block: 0;
    padding-inline: 0;
    margin-inline: 0;
    font-size: var(--root-font-size, 10px);
	}
	
.panel-group.gs-container {
	margin:0;
}
.gs-container h4 {
    font-size: 1em;
    line-height: 1.13;
}
.gs-step {
    border: 12em solid transparent;
    position: relative;
}
.gs-container .gs-item .gs-step:before {
    counter-increment: step;
    content: counter(step);
    width: 2em;
    height: 2em;
    border-radius: 50%;
    display: block;
    /* margin: 0 auto 1em auto; */
    background: var(--navy, #2F5597);
    color: #fff;
    transition: all ease-in-out 0.3s;
    text-align: center;
    font-size: 6em;
    position: absolute;
    left: -1em;
    top: -1em;
    z-index: 1;
    line-height: 1.9;
}
.gs-container .gs-item .gs-step:after {
    content: '';
    font-size: 6em;
    width: 2.83em;
    height: 2.83em;
    position: absolute;
    border-top: 1px solid var(--navy, #2F5597);
    border-left: 1px solid var(--navy, #2F5597);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    transform-origin: top left;
    transform-box: border-box;
}
.panel-group .panel-heading + .panel-collapse > .panel-body {
 border-top: 1px solid var(--navy, #2F5597);
}
/* */
.gs-container .gs-item .gs-step.collapsed:after {
    content: '';
    transform: rotate(0deg);
    border-left: none;
	}
	

	.gs-container .gs-item .gs-step.collapsed:after {
    content: '';
    transform: rotate(0deg);
    border-left: none;
    border-bottom: 1px solid var(--navy);
    top: -1.5em;
    left: calc(3em - 8px);
    font-size: 2em;
    width: 3em;
    height: 3em;
}
h4.panel-title {
	display:flex;
	align-items: center;
}
h4.panel-title .gs-step.collapsed ~ span:last-child {
    /* display: none; */
    display: block;
    font-size: 1.5em;
	border: 1px solid var(--navy);
    padding: calc(1.5em - 2px);
    border-left: 0;
    margin-left: -8px;
	opacity: 1;
	}
	h4.panel-title .gs-step:not(.collapsed) ~ span:last-child {
    display: none;
	opacity: 0;
}
.gs-item .panel-collapse.collapse {
    flex: 1 0 auto;
}