/* This home.css is for default CCR dashboard home page style */

div.card > h2.center.opaque {
	height: 6.5rem;
	margin: 0;
    padding: 0 3.25rem 0 2rem;
	vertical-align: middle;
	font: 400 1.25rem "Lato",sans-serif;
	line-height: 1.66;
	color: #fff;
	text-align: center;
	text-decoration: none;
	background-color: rgba(20,20,35,0.825);
	transition: background-color 0.45s ease;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}



div.centerbox {
  text-align: center;
  border: 3px solid green;
}

div.card > h2.center.opaque::-moz-selection {
    background: none;
}

div.content-container.grid-thirds {
	position: relative;
}

div.content-container.grid-thirds > .col {
	width: 100%;
	margin: 0 auto;
}

div.slideout {
	position: relative;
	box-sizing: border-box;
	width: 90%;
	height: 0;
	min-height: 0;
	margin: -1rem 0 1rem;
	padding: 0;
	background-color: #fff;
	overflow: hidden;
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
	z-index: 1;
}

div.slideout > div {
	position: relative;
}

div.slideout h2 {
	display: none;
}

div.slideout h3.first-topic {
	margin-top: 0;
}




/* Changed the green line width to 80% so it fits */
div.slideout h3 a {
	display: block;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
	font-size: 1rem;
	text-decoration: none;
	text-transform: none;
	color: #222;
    border-bottom: 4px solid #94d500;
	width: 80%;
}

div.slideout h3 a:hover {
	border-bottom: 4px solid #00795f;
}

div.slideout div .close-slideout {
	display: none;
}

div.slideout div.flex-grid-quarters .col {
	
	margin: 0;
	padding: 0.5rem 0 0;
}

div.slideout div.flex-grid-quarters .col p{
	margin-bottom: 0;
}

div.slideout div.flex-grid-quarters .col p a {
	display: inline-block;
	margin-bottom: 0.33rem;
	line-height: 1.5;
}



div.slideout div.flex-grid-thirds .col {
	max-width: 360px;
	margin: 0;
	padding: 0.5rem 0 0;
}

div.slideout div.flex-grid-thirds .col p{
	margin-bottom: 0;
}

div.slideout div.flex-grid-thirds .col p a {
	display: inline-block;
	margin-bottom: 0.33rem;
	line-height: 1.5;
}



div.slideout div.single .col {
	max-width: 360px;
	margin: 0 auto;
	padding-top: 0.5rem;
}

div.slideout div.single .col p a {
	display: inline-block;
	margin-bottom: 0.33rem;
	line-height: 1.5;
}

.full-width-container.home {
	
}

h2.slider {
	background: rgba(20,20,35,0.825) url(../img/svg/bracket-arrow-down.svg) no-repeat;
	background-size: 18px auto;
	background-position: center right 1.5rem;
	cursor: pointer;
}

h2.slider.expanded {
	text-decoration: none;
	background: rgba(20,20,35,0.825) url(../img/svg/bracket-arrow-up.svg) no-repeat;
	background-size: 18px auto;
	background-position: center right 1.5rem;
}


/* Added the padding-right and left to have blank space on left and right at the smartphone size*/
p#elevator-speech {
	max-width: 60rem;
	padding-right: 2rem; 
	padding-left: 2rem;
	margin: 0 auto 2.75rem;
}

/* Added a link to executive-summary link*/
a#executive-summary {
    display: block;
    width: 40rem;
    max-width: calc(100% - 4rem);
    margin: 0.75rem auto 1rem;
    padding: 1.5rem;
    font: 400 1.25rem "Lato",sans-serif;
    line-height: 1.66;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background-color: rgba(20,20,35,0.825);
    transition: background-color 0.45s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

a#executive-summaryoff {
     display: inline-block;
    width: 40rem;
    max-width: calc(100% - 4rem);
    margin: 0;
    padding: 1.5rem;
    vertical-align: middle;
    font: 400 1.25rem "Lato",sans-serif;
    line-height: 1.66;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background-color: rgba(20,20,35,0.825);
    transition: background-color 0.45s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}


a#executive-summary:hover {
    text-decoration: none;
    background-color: rgba(20,20,35,0.9625);
}

/* Added a link to executive-summary link*/
div#executive-dashboard {
     display: block;
    width: 60rem;
    max-width: calc(100% - 4rem);
    
    justify-content: center;
   
   
margin: 0 auto 3rem;
    text-align: left;
  
   

}

@media (min-width: 350px) {
	h2.slider,h2.slider.expanded {
		background-position: center right 1.75rem;
	}
}

@media (min-width: 450px) {
	p#elevator-speech {
		width: 87.5%;
		margin: 0 auto 3rem;
	}
}

@media (min-width: 650px) {
	div.card > h2.center.opaque {
		height: 6.5rem;
    	padding: 0 4rem;
		background-image: none;
	}
	
	div.card > h2.center.opaque:hover {
		background-color: rgba(20,20,35,0.9625);
		text-decoration: none;
	}
	
	div.content-container.grid-thirds {
		box-sizing: border-box;
		display: -ms-grid;
		display: grid;
		max-width: 1200px;
		-ms-grid-columns: 1fr 5.5vmin 1fr;
		grid-template-columns: 1fr 1fr;
		-ms-grid-rows: 1fr 5.5vmin 1fr 5.5vmin 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		grid-template-areas: "one two"
			"three four"
			"five six";
		grid-gap: 5.5vmin;
		margin: 0 auto;
		padding-bottom: 1.5rem;
	}
	
	div.content-container.grid-thirds > .col:nth-child(1) {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
		grid-area: one;
	}
	
	div.content-container.grid-thirds > .col:nth-child(3) {
		-ms-grid-row: 1;
		-ms-grid-column: 3;
		grid-area: two;
	}
	
	div.content-container.grid-thirds > .col:nth-child(5) {
		-ms-grid-row: 3;
		-ms-grid-column: 1;
		grid-area: three;
	}
	
	div.content-container.grid-thirds > .col:nth-child(7) {
		-ms-grid-row: 3;
		-ms-grid-column: 3;
		grid-area: four;
	}
	
	div.content-container.grid-thirds > .col:nth-child(9) {
		-ms-grid-row: 5;
		-ms-grid-column: 1;
		grid-area: five;
	}
	
	div.content-container.grid-thirds > .col:nth-child(11) {
		-ms-grid-row: 5;
		-ms-grid-column: 3;
		grid-area: six;
	}
	
	div.content-container.grid-thirds > .col {
		max-width: none;
		margin: 0;
		padding-top: 0;
	}
	
	div.slideout {
		position: absolute;
		width: 0;
		margin: auto;
	}
	
	div.slideout div .close-slideout {
		display: block;
		position: absolute;
		top: -1.5rem;
		right: -0.5rem;
		width: 24px;
		height: 24px;
	}
	
	div.slideout div.single {
		padding-top: 1.5rem;
	}
	
	div.slideout h2 {
		display: block;
		margin-top: 0;
		font-size: 1.175rem;
	}
	
	div.slideout h3 {
		margin-top: 1rem;
	}
	
	h2.slider,h2.slider:hover,h2.slider:focus {
		background-image: none;	
	}
	
	p#elevator-speech {
		margin: 0 auto 3rem;
	}
}

@media (min-width:1000px) {
	div.content-container.grid-thirds {
		-ms-grid-columns: 1fr 5.5vmin 1fr 5.5vmin 1fr;
		grid-template-columns: 1fr 1fr 1fr;
		-ms-grid-rows: 1fr 5.5vmin 1fr;
		grid-template-rows: 1fr 1fr;
		grid-template-areas: "one two three"
			"four five six";
	}
	
	div.content-container.grid-thirds > .col:nth-child(1) {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
		grid-area: one;
	}
	
	div.content-container.grid-thirds > .col:nth-child(3) {
		-ms-grid-row: 1;
		-ms-grid-column: 3;
		grid-area: two;
	}
	
	div.content-container.grid-thirds > .col:nth-child(5) {
		-ms-grid-row: 1;
		-ms-grid-column: 5;
		grid-area: three;
	}
	
	div.content-container.grid-thirds > .col:nth-child(7) {
		-ms-grid-row: 3;
		-ms-grid-column: 1;
		grid-area: four;
	}
	
	div.content-container.grid-thirds > .col:nth-child(9) {
		-ms-grid-row: 3;
		-ms-grid-column: 3;
		grid-area: five;
	}
	
	div.content-container.grid-thirds > .col:nth-child(11) {
		-ms-grid-row: 3;
		-ms-grid-column: 5;
		grid-area: six;
	}
	
	div.slideout {
		position: absolute;
	}
	
	div.slideout h3,div.slideout h3.first-topic {
		margin-top: 1.125rem;
	}
}

@media (min-width:1150px) {
	div.card > h2.center.opaque {
		height: 6.5rem;
		padding: 0.5rem 4rem 2.5rem 4rem;
		font-size: 1.55rem;
		outline: none;
	}
	
	div.slideout div .close-slideout {
		top: -2.5rem;
    	right: -1.5rem;
		width: 35px;
		height: 35px;
	}
	
	div.slideout div.flex-grid-quarters .col {
		padding-top: 1rem;
	}
	
	div.slideout div.flex-grid-quarters .col p a {
		margin-bottom: 0.66rem;
	}
	
	
	
	
	
	div.slideout h2 {
		width: 85%;
		margin-bottom: 0;
		font-size: 1.33rem;
		font-weight: normal;
	}
	
	div.slideout h2.single {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}
	
	.full-width-container.home {
		
		
	}
}

@media (min-width:1500px) {
	div.content-container.grid-thirds {
		-ms-grid-columns: 1fr 6vmin 1fr 6vmin 1fr;
		grid-gap: 6vmin;
	}
	
	div.slideout h3,div.slideout h3.first-topic {
		margin-top: 2rem;
	}
}

@media (min-width:1600px) {
	div.slideout h2 {
		font-size: 1.5rem;
	}
}