@import url('https://fonts.googleapis.com/css?family=Montserrat:Thin,Light,Regular,Medium,Bold,Black|Montserrat+Condensed');

@font-face {
    font-family: 'Linux-Biolinum';
    src:url('/fonts/Linux-Biolinum.ttf.woff') format('woff'),
        url('/fonts/Linux-Biolinum.ttf.svg#Linux-Biolinum') format('svg'),
        url('/fonts/Linux-Biolinum.ttf.eot'),
        url('/fonts/Linux-Biolinum.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}
/*
3. Integrate the fonts into your CSS:
Add the font name to your CSS styles. For example:

h1 { 
   font-family: 'Linux-Biolinum';
}  

Troubleshooting Webfonts
1. You may be using the fonts on different domain or subdomain.
2. Check if you have link the fonts properly in the CSS.
*/

body {font-size:18.75px; line-height:24px; font-family:Montserrat, 'Open Sans', sans-serif; margin:0; color:#58585a; background-color: #ECF5FD;}
p {line-height: 1.4em;}
a {
    text-decoration: underline;
    color: inherit;
	cursor : pointer;
}
img {width:100%;}

h2 {text-transform: uppercase; font-weight:500;  font-size:25px;  margin-bottom:30px;}
h3 {font-family: 'Montserrat Condensed'; text-transform: uppercase; margin-bottom:24px; }
h4 {font-family: 'Montserrat Condensed'; text-transform: uppercase; font-weight:600; margin-bottom:5px;}

.highlight {font-weight:500;}

.g_layout1 {
	display: grid;
	grid-gap: 0px;
	grid-template-rows: auto auto 1fr 40px;
	grid-template-areas: 
        "header"
        "pageTitle1"
        "content1"
        "footer";
	min-height: 100vh;
	margin: 0 auto;
}

.g_layout2 {
	display: grid;
	grid-gap: 0px;
	grid-template-rows: auto 40px auto auto 1fr 60px 40px;
	grid-template-areas: 
        "header"
		"progressBar"
        "pageTitle2"
		"contentTitle"
        "content2"
        "nav"
        "footer";
	min-height: 100vh;
	margin: 0 auto;
}

.g_layout3 {
	display: grid;
	grid-gap: 0px;
	grid-template-rows: auto auto 1fr 40px 40px;
	grid-template-areas: 
        "header"
        "pageTitle1"
        "content1"
        "nav"
        "footer";
	min-height: 100vh;
	margin: 0 auto;
}

.g_layout4 {
	display: grid;
	grid-gap: 0px;
	grid-template-rows: 40px auto;
	grid-template-areas: 
        "nav"
        "content3";
	min-height: 100vh;
	margin: 0 auto;
}


.ga_contentTitle {
	grid-area: contentTitle;
	height: 60px;
	line-height:50px;
	text-transform:uppercase;
	font-size:110%;
	background-color: #eee;
	color: #3F7DB2;
	padding-left:20px;
	font-weight:bold;
	border-top:10px solid #ccc; 
	margin: auto;
    max-width: 1000px;
    width: 100%;
}

.content {max-width:1000px; margin: 0 auto;}

.ga_content1 {
	grid-area: content1;
	border-top:10px solid #ccc; 
	padding: 20px 30px 30px 30px; 
}
.ga_content2 {
	grid-area: content2;
	padding: 20px 30px 30px 30px; 
}
.ga_content3 {
	grid-area: content3;
	background-color:#fff; 
}

.ga_content1, .ga_content2 {
	background-color:#fff; 
	margin-bottom:10px; 
	border-bottom:10px solid #ccc;
	padding-top: 10px;
}

.ga_nav {
	grid-area: nav;
	max-width:1000px;
	margin: auto;
}

.g_navBtns {
	display: grid;
	grid-gap: 0px;
	grid-template-columns: 2fr 10fr 2fr;
	grid-template-areas: 
	    "nav-prev nav-center nav-next";
}
.pageName {
	z-index:5;
	display:none;
	position: absolute;
	background-color:#ddd;
	border-radius: 25px;
	height:auto;
	padding: 5px 20px;
	margin:20px;

}

.ga_nav-prev {grid-area: nav-prev; }
.ga_nav-center {grid-area: nav-center; }
.ga_nav-next {grid-area: nav-next; }

.ga_footer {grid-area: footer; background-color: #fff;}
.g_footer {
	display: grid;
	grid-gap: 0px;
	grid-template-columns: 3fr 8fr 3fr;
	grid-template-areas: 
	    "footerLeft footerCenter footerRight";
	line-height: 2em;
	font-weight: 500;
	font-family:'Linux-Biolinum';
}
.ga_footerLeft {grid-area: footerLeft; padding-left:20px;}
.ga_footerCenter {grid-area: footerCenter; text-align:center;}
.ga_footerRight {grid-area: footerRight; padding-right:20px; text-align:right;}


.ga_pageTitle2 {
	grid-area: pageTitle2; 
	margin:0 0 0 0;
}

.ga_pageTitle1, .ga_pageTitle2 {
	font-size:140%;
	font-weight:bold;
	color:#394154;
	text-transform: uppercase;
	border-bottom: solid 1px #444;
	line-height: 30px;
	margin: auto;
    max-width: 1000px;
    width: 100%;
}

.ga_pageTitle1 {
	grid-area: pageTitle1; 
	margin: 20px 0 0 25px;
}

.ga_pageDescription {
	grid-area: pageDescription;
	margin-bottom:20px;
	margin-top: 10px;
	line-height:1.4em;
	font-size: 1.3em;
    color: #036;
}

.ga_header {
	grid-area: header;
	display: grid;
	grid-gap: 0px;
	grid-template-columns: 2fr 5fr;
	grid-template-areas: 
        "logo menu";
 	position: sticky;
	top: 0;
	width: 100%;
	border-bottom:1px solid #cdcdcd;
}

.ga_logo {
	grid-area: logo;
	padding: 10px 0 10px 20px;
	background-color:#fff;
	height: 75px;
}
.logo {
	background-image:url('/img/logo.png');
    background-repeat: no-repeat;
	background-size:contain;
	max-width: 265px;
    max-height: 60px;
}

.ga_menu {
	grid-area: menu;
	font-family: 'Linux-Biolinum', Montserrat, 'Open Sans', sans-serif;
	padding-top: 20px;
	padding-right: 30px;
	text-align: right;
	background-color:#fff; 
}
.ga_menu a {text-decoration:none;}
.ga_menu a:hover {text-decoration:underline;}

.menu-divider {
	height: 19px;
	width: 1px;
	background-color: #CCCCCC;
	padding: 10px 0 !important;
}

.ga_subBanner {
	grid-area: subBanner;
	background-color: #ccc;;
	text-align:right;
	padding-right:40px;
	color: #fff;
	line-height:50px;
}

.ga_progressBar {
	grid-area: progressBar;
	padding-right: 5px;
	padding-top: 5px;
	background-color: #ECF5FD;
	margin: auto;
    max-width: 1000px;
    width: 100%;
}

.empty-progress-bar2 {
	width: 58px;
}
.empty-progress-bar3 {
	width: 85px;
}
.empty-progress-bar8 {
	width: 220px;
}
.empty-progress-bar5 {
	width: 140px;
}

.empty-progress-bar11 {
	width: 301px;
}
.empty-progress-bar {
	height: 19px;
	border: 1px solid #DCE1E3;
	background-color: #FFFFFF;
	border-radius: 25px;
	float:right;
}	

.progressBar {
	height: 13px;
	background-color: #3F7DB2;
	margin-top: 2px;
	margin-left:2px;
	border-radius: 25px;
}
.progress1 {width: 27px;}
.progress2 {width: 54px;}
.progress3 {width: 81px;}
.progress4 {width: 108px;}
.progress5 {width: 135px;}
.progress6 {width: 162px;}
.progress7 {width: 189px;}
.progress8 {width: 216px;}
.progress9 {width: 243px;}
.progress10 {width: 270px;}
.progress11 {width: 297px;}

.progressText {
	padding-left:10px;
	float:right;
	color: #394154;
	font-style:italic;
}

.ga_themePageTitle {grid-area: themePageTitle; }


.ga_themeSummary {grid-area: themeSummary; }

.ga_g_themeAmt {text-align:right; }

.g_themeIntro {
	display: grid;
	grid-gap: 2px;
	grid-template-columns: 3fr 10fr;
	grid-template-rows: 1fr 3fr;
	grid-template-areas: 
        "themeImg themeTitle"
        "themeImg themeDesc";
 	margin: 0 0px 30px 0px;
    border-bottom: 1px solid #ccc;
    padding: 0 0 20px 0;
}

.g_theme {
	display: grid;
	grid-gap: 2px;
	grid-template-columns: 2fr 5fr 5fr;
    grid-template-rows: 1fr 2fr .6fr;
	grid-template-areas: 
        "themeImg themeTitle themeIcon"
        "themeImg themeDesc themeDesc"
        "themeImg . .";
	margin: 0 0px 30px 0px;
    border-bottom: 1px solid #ccc;
    padding: 0 0 10px 0;
}

.noBorder {border:none !important;}

.g_bandFinal {
	display: grid;
	grid-gap: 2px;
	grid-template-columns: 120px 1fr;
	grid-template-rows: 20px auto;
	grid-template-areas: 
        "themeImg themeTitle "
        "themeImg themeDesc";
 	margin: 0 0 30px 0;
 	padding: 0 0 10px 0;
	border-bottom: 1px solid #ccc;
}


.g_themeFinal {
	display: grid;
	grid-gap: 15px;
	grid-template-columns: 2fr 4fr 6fr;
    grid-template-rows: 1fr 2fr 3fr;
	grid-template-areas: 
        "themeImg themeTitle themeIcon"
		"themeImg themeDesc themeDesc"
        "themeImg themeSliderFinal themeSliderFinal";
	margin: 0 0px 30px 0px;
    border-bottom: 1px solid #ccc;
    padding: 0 0 20px 0;
}

.ga_g_themeSliderFinal {
	grid-area: themeSliderFinal;
	display:grid;
	grid-template-rows: 40px 40px 50px;
	grid-template-column: auto;
	grid-template-areas: 
        "sliderClient"
        "sliderRecommended"
		"sliderFinal";
}

.ga_g_sliderClient {
	grid-area: sliderClient;
}

.ga_g_sliderRecommended {
	grid-area: sliderRecommended;
}

.ga_g_sliderFinal {
	grid-area: sliderFinal;
    padding-top: 10px;
}
.ga_g_sliderClient, .ga_g_sliderRecommended {
	display:grid;
	grid-template-columns: 3fr 6fr 1fr;
	grid-template-areas: 
        "sliderTitle sliderBar themeAllocReview";
	margin-top: 10px;
	text-align:right;
}

.ga_g_sliderFinal {
	display:grid;
	grid-template-columns: 3fr 6fr 1fr;
	grid-template-areas: 
        "sliderTitle sliderBar themeAllocFinal";
	text-align:right;
}

.ga_themeTitle {grid-area: themeTitle; font-size: 20px; font-weight:bold; text-transform: uppercase;}
.ga_themeDesc {
	grid-area: themeDesc;
	line-height: 1.3em;
    font-size: 1.2em;
	margin-bottom: 7px;
}
.ga_themeImg {grid-area: themeImg; }
.ga_themeSlider {grid-area: themeSlider;}

.themeTitle, .ga_themeTitle, .ga_themeDesc, .ga_themeSlider { margin-left:20px;}

.ga_themeIcon {
	grid-area: themeIcon;
	text-align: right;
}

.ga_themeAlloc {
	grid-area: themeAlloc;
	margin-right:20%;
    line-height: 35px;
	text-align: right;
	font-weight: bold;
}

.themeAllocReview {
	grid-area: themeAllocReview;
	font-weight:normal;
	font-size: 100%;
    line-height: 112%;
}

.ga_themeAllocFinal {
	grid-area: themeAllocFinal;
	font-weight:bold;
}


.ga_sliderTitle {grid-area: sliderTitle; text-align:right; padding-right:15px;}
.ga_sliderBar {grid-area: sliderBar;}
.ga_sliderAmt {grid-area: sliderAmt; text-align:right;}
.ga_sliderPercent {grid-area: sliderPercent; text-align:right;}

.errorMsg {display:none; margin:10px 0 10px 0; color:#f00;}
.contentDiv	{ text-align: center;}

.sdgIntroVid {
	width: 100%;
    max-width: 560px;
    height: 345px;
}

.g_profile {
	display: grid;
	grid-gap: 15px;
	grid-template-rows: 50px auto;
	grid-template-areas: 
        "profileIntro"
		"profileForm";
}
.ga_profileIntro {grid-area: profileIntro;}
.ga_profileForm {grid-area: profileForm;}

.g_profileForm {
	display: grid;
	grid-gap: 15px;
	grid-auto-flow: row;
	grid-template-areas: 
        "profileClient"
		"profileSpouse"
		"profileLegal"
		"profileMailing";
	max-width: 500px;
    margin: auto;
}
.ga_g_profileClient{grid-area: profileClient; background-color:#ddd;}
.ga_g_profileSpouse{grid-area: profileSpouse; background-color:#eee;}
.ga_g_profileLegal{grid-area: profileLegal; background-color:#ddd;}
.ga_g_profileMailing{grid-area: profileMailing; background-color:#eee;}
.ga_g_profileLocalize{grid-area: profileLocalize; background-color:#ddd;}

.ga_g_profileClient, .ga_g_profileSpouse, .ga_g_profileLegal, .ga_g_profileMailing {
	display: grid;
	grid-template-rows: 30px auto;	
	grid-template-areas: 
        "profileTitle"
		"profileSubForm";
}

.ga_g_profileLocalize {
	display: grid;
	grid-template-rows: 30px auto;	
	grid-template-areas: 
        "profileTitle"
		"profileLocal";
}

.ga_g_profileLocal {
	grid-area:profileLocal;
	display: grid;
	grid-gap: 5px;
	grid-template-columns: [labels] 1fr [values] 190px;
	grid-auto-flow: row;
	padding:10px 20px 10px 0;
}

.ga_profileTitle {
	grid-area:profileTitle;
	background-color:#036;
	color:#fff;
	font-size:16px;
	padding:7px 5px 5px 5px;
}

.ga_g_profileSubForm {
	grid-area:profileSubForm;
	display: grid;
	grid-gap: 5px;
	grid-template-columns: [labels] 200px [values] 1fr;
	grid-auto-flow: row;
	padding:10px 20px 10px 0;
}


.ga_g_profileSubForm > label, .ga_g_profileLocal > label{
    grid-column: labels;
    grid-row: auto;
	text-align:right;
	font-weight:bold;
}
.ga_g_profileSubForm > span, .ga_g_profileLocal > div {
    grid-column: values;
    grid-row: auto;
}
.ga_g_profileSubForm > values, .ga_g_profileLocal > values {
    grid-column: values;
    grid-row: auto;
}

.g_summary {
	display: grid;
	grid-template-rows: 30px auto;	
	grid-template-areas: 
        "summaryTitle"
		"summaryContent";
	margin: auto;
}
.ga_summaryTitle {
	grid-area:summaryTitle;
	background-color:#eee;
	color:#000;
	font-size:14px;
	padding:2px 5px 5px 10px;
	line-height:30px;
	font-weight:600;
}
.ga_summaryContent {
	grid-area:summaryContent;
}

.g_summary2ColContent {
	grid-area:summary2ColContent;
	display: grid;
	grid-template-columns: 240px auto;	
	grid-template-areas: 
        "contentLeft contentRight";
	margin:15px 0;
}
.ga_contentLeft {
	grid-area:contentLeft;
	text-align:right;
    padding-right: 20px;
}
.ga_contentRight {grid-area:contentRight;}

.g_summaryPillarSDGs {
	display: grid;
	grid-template-columns: 55px 1fr 150px;	
	grid-template-rows: 32px;	
	grid-template-areas: 
        "summarySdgIcon summarySdgTitle summarySdgScore";
	margin: 10px 0;
}
.ga_summarySdgIcon {
	grid-area:summarySdgIcon;
	
}
.ga_summarySdgTitle {
	grid-area:summarySdgTitle;
}
.ga_summarySdgScore {
	grid-area:summarySdgScore;
	padding-top: 5px;
}
.summaryAllocation {
	font-weight:bold;
	line-height: 35px;
    font-size: 1.2em;
}
.bottomLine {border-bottom:1px solid #CCC;}

/* MODAL */

#modalCardDiv {z-index: 2;}  /* Sit on top of other modal*/
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 3; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
	min-height: 200px;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modalContent {
    background-color: #eee;
    padding: 7px;
    border: 1px solid #888;
	max-height:700px;
}

.cardContent {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.modalBody {
    background-color: #fff;
    padding: 7px;
	min-height: 290px;
	max-height: 620px;
}
.modalBody li {margin: 15px 0 15px 0;}
.modalBody p {
    line-height: 1.4em;
}
.modal .close {float:right;}

.modalTitle {
	float: left;
	font-weight: bold;
	line-height: 28px;
	width: 92%;
	font-size: 140%;
	text-align:center;
}

.g_2cols {
	display: grid;
	grid-gap: 40px;
	grid-template-columns: 1fr 1fr;	
	grid-template-rows: auto auto;	
	grid-template-areas: 
        "row1col1 row1col2"
		"row2col1 row2col2";
	margin-top: 20px;
}

.ga_row1col1 {grid-area: row1col1;}
.ga_row1col2 {grid-area: row1col2; 	margin: auto;}
.ga_row2col1 {grid-area: row2col1;}
.ga_row2col2 {grid-area: row2col2;}

input[type=checkbox] {
  transform: scale(1.5);
  margin-bottom: 12px;
}

.hidden {visibility: hidden;}

.cover {
	cursor: pointer;
	background-color:#ddd;
	z-index:3;
}

.scrollContainer {
	width:100%;
	overflow-y: scroll;
	height:470px;
}

.g_sdgObject {
	display: grid;
	grid-gap: 0px;
	grid-template-columns: 1fr 4fr;	
	grid-template-rows: 30px auto;	
	grid-template-areas: 
		"sdgImg sdgTitle"
		"sdgImg sdgDesc";
	margin: 10px;
}

.ga_sdgImg {
	grid-area: sdgImg;
}

.ga_sdgImg {
	grid-area: sdgTitle;
}

.ga_sdgImg {
	grid-area: sdgDesc;
}

.sdgIcons {margin-left:50px;}
.sdgIcon {float:left; width:75px; margin-right:15px;}
.sdgIconSm {float:left; width:45px; margin-left:15px;}
.sdgIconGroup {float:right;}

@media only screen and (max-width: 900px)  {
	.ga_header {
		position: relative;
	}
	.ga_pageTitle1,
	.ga_pageTitle2 {
		padding-left: 5px;
	}
	.coreBadge {
		float: none !important;
		width: 50% !important;
		margin: auto;
	}
	.g_2cols {
	    grid-template-columns: 2fr 1fr;
	}
} /* max-width: 900px */

@media only screen and (max-width: 700px)  {
	.ga_logo {padding: 10px 0 10px 10px;}
	.ga_pageTitle1,
	.ga_pageTitle2 {
		font-size: 110%;
		padding-left: 5px;
	}
	.g_theme {
		grid-template-rows: 1fr 1fr 4fr 1fr;
		grid-template-areas: 
			"themeImg themeAlloc themeTitle themeTitle"
			"themeImg themeAlloc themeIcon themeIcon"
			"themeImg themeAlloc themeDesc themeDesc"
			"themeImg themeAlloc themeSlider themeSlider";
	}
	.ga_content1, .ga_content2 {
		margin-bottom: 10px;
	}
	.ga_content2 {
		padding: 20px 10px 30px 10px;
	}
	.ga_contentTitle {
		height: 70px;
		line-height: 30px;
		padding-left: 5px;
	}
		
	.g_sdgPillar {
		grid-template-areas: "pillarImg pillarTitle pillarTitle"
		 "pillarImg pillarDescription pillarDescription"
		 "pillarImg pillarSDGsLeft pillarSDGsLeft"
		 "pillarImg pillarSDGsRight pillarSDGsRight" !important;
	}
	.ga_pillarSDGsRight {
		padding-left: 20px;
	}
	.ga_pillarSDGsLeft {
		padding-bottom: 0 !important;
	}
	.ga_menu {
		padding-right: 10px;
	}
	.ga_menu li {
		padding: 10px 5px 10px 5px !important;
		font-size: 1.2em;
	}
	.g_2cols {
		grid-template-areas: "row1col1 row1col2"
		"row2col1 row2col1"
		"row2col2 row2col2";
	}
	.g_summaryPillarSDGs {
		grid-template-columns: 55px 1fr;
		grid-template-areas: "summarySdgIcon summarySdgTitle"
		"summarySdgIcon summarySdgScore";
	}
	.g_themeFinal {
		grid-template-columns: 2fr 4fr 6fr;
		grid-template-rows: 1fr 2fr 3fr;
		grid-template-areas: "themeImg themeTitle themeTitle"
		 "themeImg themeIcon themeIcon"
		 "themeImg themeDesc themeDesc"
		 "themeImg themeSliderFinal themeSliderFinal";
	}
	.ga_g_sliderClient,
	.ga_g_sliderRecommended {
		grid-template-columns: 5fr 1fr;
		grid-template-areas: "sliderTitle themeAllocReview"
		"sliderBar sliderBar";
	}
	.ga_g_sliderFinal {
		grid-template-columns: 5fr 1fr;
		grid-template-areas: "sliderTitle themeAllocFinal"
		"sliderBar sliderBar";
		margin-top: 0px;
	}
	.ga_g_themeSliderFinal {
		grid-template-rows: 70px 70px 70px;
	}
	
	
	
} /* max-width: 700px */

@media only screen and (max-width: 570px)  {
	.ga_header {
		grid-template-columns: 60px 1fr;
	}
	.logo {
		background-image:url('/img/CCTClogo.jpg');
		margin: 0;
	}
	.ga_menu li {
		font-size: 1.3em;
	}
	.ga_sliderBar {
		display:none;
	}
	.g_summary2ColContent {
		grid-template-columns: 1fr;
		grid-template-areas: "contentLeft"
		"contentRight";
	}
	.ga_g_sliderClient, .ga_g_sliderRecommended {
		grid-template-columns: 5fr 1fr;
		grid-template-areas: "sliderTitle themeAllocReview";
	}
	.ga_g_sliderFinal {
		grid-template-columns: 5fr 1fr;
		grid-template-areas: "sliderTitle themeAllocFinal";
	}
	.slider {
		background-image: url("/img/sliderBkgd-blue-sm.png") !important;
	}
	
	
	
	
	
} /* max-width: 570px */

@media print {
	#menuList,
	.continueBtn,
	.backBtn,
	.printBtn,
	.acceptBtn,
	.ga_nav-prev,
	.ga_nav-next {display:none;}
	
	.g_layout3 {
		grid-template-rows: auto auto 1fr 40px;
		grid-template-areas: "header header header"
		 "pageTitle1 pageTitle1 pageTitle1"
		 "content1 content1 content1"
		 "footer footer footer";
	}
	.g_layout4 {
		grid-template-rows: 0px auto;
	}
	.ga_content1 {
		padding: 20px 0px 30px 0px;
	}
}