/*  MENU */
.ga_menu a {font-size:.8em;}
.ga_menu li { font-size:1.2em; display: inline-block; padding: 10px 10px 10px 10px;}
.ga_menu ul {
	list-style-type: none;
    margin: 0;
    padding: 0;
	cursor: pointer;
	text-align: right;
}
.subMenu {display:none;}
.subMenu li { padding: 10px 10px 10px 10px; display: list-item;}
.menu-signup-0 {border:1px solid #ddd;}


.introCardDiv {
	float:left;
	width:50%;
}


.cardDescDiv {font-size: 1.1em; line-height: 1.2em; min-height:97px; text-align:left; margin:10px;}
.cardTitle {font-size:150%; text-align:center; margin:10px 10px 0 10px; line-height: 22px; min-height:45px;}
.cardTitleDiv {float:left; width:69%; padding-top:20px;}
.cardImgsDiv {float:left; width:30%;  text-align:center;}
.cardVidDiv {
	padding:10px 10px 10px 10px;
	text-align:center;
}
.imgLink {padding-bottom:5px;}

#sdgIntroVid {margin-top:20px;}
.choiceDiv {
	width:260px; min-width:70px; float:left; margin:10px 10px 10px 10px; min-height: 122px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.choiceTitle {font-size:120%; text-align:center; margin:10px 10px 0 10px; line-height: 18px; min-height:35px; font-weight:bold;}
.choiceImgDiv {padding:10px 10px 10px 10px;}
.choiceImg {
	width:100%; border-radius: 10%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.choiceVidDiv {padding:10px 10px 10px 10px;}
.choiceVid {
	width:100%; border-radius: 10%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.choiceDescDiv {font-size:90%; line-height: 16px; min-height:80px; text-align:left; margin:10px;}
.selectBtnDiv {max-width:700px; margin:10px auto 10px auto; text-align:center; color:#fff;}
.selectBtn {}
.exploreBtn {text-align:right;}
.vidIframe {width:560px; height:315px;}

.cardDiv {max-width:600px; margin:20px auto;  padding: 5px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.cardLeftDiv {width:20%; float:left;}
.cardRightDiv {width:60%; float:left;}
.cardImg {width:100px;}
.cardTitle {font-weight:bold; font-size:1.3em; line-height: 1.4em; margin-bottom: 10px;}
#metaIntro {margin-top:20px;}
#metaList {list-style-type: none; padding-left: 0; margin-top:20px;} 
#metaList li {margin-top:10px; font-weight:bold; line-height:26px;}


.smFinalsDiv {min-height:50px;}
.smFinalDiv {width:50px; float:left;}
.smFinalImg {
	width:97%; margin:0 5px 0 5px; border-radius: 10%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.smFinalText {padding-left:20px; line-height: 40px;}

.resultsDiv {max-width:700px; margin:0 auto;}
.goalDiv {width:100%; margin-top:50px;}
.goalLeftDiv {float:left; width:20%;margin-left:20px;}
.goalRightDiv {float:left; width:70%; margin-left:20px;}

.goalTitle {font-size:120%; font-weight:bold; text-align:center; min-height:40px;}
.goalImg {
	width:97%; margin:0 5px 0 5px; border-radius: 10%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.goalDesc {min-height:30px; }
.metaScoreTitle {float:left; padding-left:5px;}
.metaScore {float:right; font-weight:bold; padding-right:5px;}
.rowLight {background-color: #eee; line-height:20px; width:90%; font-size:70%;}
.rowDark {background-color: #ccc; line-height:20px; width:90%; font-size:70%;}
.SDGtitle {font-size:110%; min-height:30px; line-height: 30px; margin-top: 15px; font-weight:bold;}

.editBtn {text-transform: uppercase; margin-top:20px; text-align:right; width:90%;}
.continueBtn {text-transform: uppercase; text-align:right; margin-right:20px;}
.backBtn {text-transform: uppercase; text-align:left; margin-left:20px;}
.printBtn {float:right; margin-left:20px; }
.acceptBtn {float:right; margin-left:20px; }
.pageSubTitle {padding-top:20px;}

.preferenceList {
	margin: 20px auto auto auto;
    width: 300px;
	font-size: 120%;
}
.preferenceTitle {height:25px;}

.ga_nav-center {margin:auto;}
.ga_nav-center ul {
    list-style-type: none;
	margin: 0;
}
.ga_nav-center li {
    display: inline-block;
    padding: 2px 10px 0px 10px;
}
.navPageNumber {color:#ccc;}
.navPageNumber a {text-decoration:none;}
.navPageNumber a:hover {text-decoration:underline;}
.navPageCurrent {color:#000; font-weight:500;}
.navPageSaved {color:#777;}

/*  BUTTON  */
.btn {
  background-image: -webkit-linear-gradient(top, #3f7db2 , #3f7db2 );
  background-image: -moz-linear-gradient(top, #3f7db2 , #3f7db2 );
  background-image: -ms-linear-gradient(top, #3f7db2 , #3f7db2 );
  background-image: -o-linear-gradient(top, #3f7db2 , #3f7db2 );
  background-image: linear-gradient(to bottom, #3f7db2 , #3f7db2 );
  background-repeat: repeat-x;
  
  background-color: #3f7db2  !important;
  
  font-family: Arial;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  vertical-align: middle;
  color: #ffffff;
  margin: 0 5px 2px 5px;
  padding: 5px 15px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  border-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.4);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#999', endColorstr='#777', GradientType=0);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: color 0.1s linear, background 0.3s ease-out;
  -moz-transition: color 0.1s linear, background 0.3s ease-out;
  -webkit-transition: color 0.1s linear, background 0.3s ease-out;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
  color:#fff;
}

/*  CLOSE BUTTON  */
.close {
    color: #fff;
    font-size: 28px;
    font-weight: bold;
	padding: 0 10px 10px 0;
	line-height:18px;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}



/*  SLIDER  */
.slidecontainer { max-width: 570px; }

.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 95%; /* Full-width */
    height: 25px; /* Specified height */
 /*   background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
/*    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
	background-image: url("/img/sliderBkgd-blue.png");
    background-repeat: no-repeat;
    background-size: contain;
}

.sliderFinal {
	padding-bottom: 10px;
}

input[type="range" i] {
    color: #000;
}

.sliderValue {
	padding-left: 20px;
    vertical-align: 8px;
	font-weight: bold;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 34px; /* Slider handle height */
    cursor: pointer; /* Cursor on hover */
	border: 1px solid #000;
	border-radius: 3px;	
	background: rgba(0, 0, 0, .30);
}

.slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 34px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
	border: 1px solid #000;
	border-radius: 3px;
	background: rgba(0, 0, 0, .30);
}


/* THEMES  */

/* *********          cluster flex          ******** */
*, *:before, *:after {
    box-sizing: inherit;
}
* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
	
/* risk table */

.cost-benefit-table {
    width: 100%;
	font-size:80%;
}	
caption, th {
    text-align: left;
}
caption {
    padding-top: 8px;
    padding-bottom: 8px;
    color: #777;
    font-weight: bold;
}
.risk-header-row {
    background-color: #1C9F55;
    color: white;
    border-bottom: 2px solid gray;
	text-transform: uppercase;
}
.risk-header-row a {
	text-decoration:underline;
	cursor: pointer;
}
.risk-header-row a:hover{
	color:#000;
}
.first-td-header {min-width:230px;}

.cost-benefit-header-row {
    background-color: #037DAE;
    color: white;
    border-bottom: 2px solid gray;
	text-transform: uppercase;
}
.cost-benefit-table th, .cost-benefit-table td {
    border: 1px solid #fff;
    line-height: 1.2;
    padding: 10px 10px;
    text-align: center;
}
.cost-benefit-row-odd {
    background: none repeat scroll 0 0 #ccd0d5;
}
.cost-benefit-row-even {
    background: none repeat scroll 0 0 #ebecee;
}



/*  account amt, goal, purpose */
#investAmt {text-align:right;}
.d_defineGoal {font-size:24px; margin:15px 0 0 0;}
.d_formText {padding-right: 10px; line-height: 40px;}
.d_formField {}
.d_formField input {
	background-color: transparent;
    border: none;
    color: #000;
	margin:0 10px 0 0;
	padding-right:5px;
	font-size:24px;
	}
.d_dropdown input {width:100px;}

.d_defineGoal input[name='investAmt'] {
	width:130px;
	border-bottom: 5px solid #0d122b;
}
.d_defineGoal input[name='investPurpose'] {
	width:200px;
	border-bottom: 5px solid #0d122b;
}

.d_defineGoal input[name='investYears'] {
	width:35px;
	border-bottom: 5px solid #0d122b;
	color:#00f;
}

/* SDG Card  */
.cardRow {display:inline-block;}
#hearts {
 	height: 45px;
	width: 75%;
    background: url('/img/heart-scale1.png');
	background-position: 0 0;
	background-repeat: no-repeat;
	margin: auto;
    display: block;
}
.hearts {
	margin-top:30px;
	float:left;
}

.heartScore {
	height: 24px;
    width: 135px;
    background-size: 90%;
    background-repeat: no-repeat;
    background: url('/img/heart-scale-xsm.png');
}

#heart0 {
	height: 25px;
    width: 135px;
    background-size: 90%;
    background-repeat: no-repeat;
    background: url('/img/heart-scale-xsm.png');
}


/*   */

.pillar {
	margin: 20px 0px;
}

.g_sdgPillar {
	display: grid;
	grid-gap: 0px;
	grid-template-columns: 2fr 5fr 5fr;
	grid-template-areas: 
        "pillarImg pillarTitle pillarTitle"
        "pillarImg pillarDescription pillarDescription"
		"pillarImg pillarSDGsLeft pillarSDGsRight";
}

.ga_pillarImg {
	grid-area: pillarImg;
	padding: 10px;
}
.ga_pillarImg > img {
	width:100%;
}

.ga_pillarTitle {grid-area: pillarTitle;}
.ga_pillarDescription {grid-area: pillarDescription; font-size: 16px;}

.ga_pillarTitle {
	font-weight:bold;
	text-transform: uppercase;
	font-size:20px;
	line-height: 20px;
	padding: 10px 10px 0 20px;
}
.ga_pillarDescription {
	padding: 0 0 0 20px;
	line-height: 1.3em;
	font-size:1.2em;
}
.ga_pillarSDGsLeft {grid-area: pillarSDGsLeft; padding: 0 0 20px 20px;}
.ga_pillarSDGsRight {grid-area: pillarSDGsRight; padding-bottom: 20px;}

.g_sdgRow {
	display: grid;
	grid-gap: 5px;
	grid-template-columns: 60px auto;
	grid-template-areas: 
        "sdgImg sdgTitle"
		"sdgImg sdgHearts";
	padding: 10px 0 0 0;
}
.ga_sdgImg {
	grid-area: sdgImg;
	padding: 5px 5px 5px 5px;
    width: 60px;
}
.ga_sdgHearts {
	grid-area: sdgHearts;
}
.ga_sdgTitle {
	grid-area: sdgTitle;
    text-align: left;
	font-weight:bold;
	padding-top: 3px;	
}
.ga_sdgTitle a{text-decoration:none;}

.sortCardPercent {float:left; font-size: 130%; line-height: 50px; min-height: 45px; margin: 7px 10px 0px 10px;}

.sdgList {margin-top:10px;}

/*  */

.themeMembers-modal .sdgIcon {width:30px; float:left; margin-bottom: 3px;}
.themeMembers-modal .sdgTitle {float:left; padding: 6px 0 0 15px;}
.themeMembers-modal .membersIntro {margin:10px;}
#themeTotalPct {padding-left:20px;}
.themeTitleImg {width:100%;}

.learnMoreBtn {padding-top: 1px; text-align: center; font-size:80%;}
.sliderTitle {font-weight:bold;}
.sliderAmt{line-height: 112%; font-size:130%; font-weight:bold; color: #02558B;}
.sliderAmtSm{line-height: 100%;  font-weight:bold;}
.sliderPercent {}

.themeTitle {font-size:20px; font-weight:bold; text-transform: uppercase; line-height: 35px}

.sectionTitle {
	font-weight:bold;
	text-transform: uppercase;
	color:#58585A;
	margin-bottom:10px;
}

.colImg {
	max-width:200px;
}
.coreBadge {
	float:left; 
	width:30%; 
	text-align: center;
	color: #407db2;
    font-weight: bold;
    text-transform: uppercase;
}	

.g_pillarList {
	display: grid;
	grid-gap: 0px;
	grid-template-columns: 70px 1fr;	
	grid-template-areas: 
        "pillarIcon pillarIconTitle"
		"pillarIcon pillarIconDesc";
	margin-top: 20px;
}
.ga_pillarIcon {grid-area: pillarIcon; padding: 0px 10px 0 0px;}
.ga_pillarIconTitle {grid-area: pillarIconTitle; font-weight:bold; text-transform: uppercase;}
.ga_pillarIconDesc {grid-area: pillarIconDesc; font-size:.8em; line-height:1.6em;}

.g_quiz {
	display: grid;
	grid-gap: 0px;
	grid-template-columns: 1fr;	
	grid-template-rows: auto auto;	
	grid-template-areas: 
        "quizIntro"
		"quizQuestions";
	margin-top: 20px;	
}
.ga_quizIntro {grid-area: quizIntro; padding: 0px 10px 0 35px;}
.qa_quizQuestions {grid-area: quizQuestions; padding: 0px 10px 0 0px;}

.quizAnswerList {list-style-type: none;}
.quizQuestionTitle {padding: 0px 10px 0 0px; font-weight:bold;}
.quizAnswerChoice {padding: 10px 10px 0 0px;}
.ga_quizQuestions ol {counter-reset: item;}
.ga_quizQuestions ol > li {display: block; margin-bottom:30px;}
.ga_quizQuestions ol > li:before {content: counter(item) ". "; counter-increment: item; font-weight: bold;}

/* Dropdown Button */
.dropbtn {
  color: #00f;
  padding: 4px 4px 0px 0px;
  border-bottom: 5px solid #0d122b;
  cursor: pointer;
  line-height: 28px;
  text-decoration: none;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #ddd;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  padding-right:10px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}	
	
	
/*
@media (min-width: 800px)
.offerings-overview__block__left {
    padding: 20px 0 20px 20px;
    width: initial;
}
*/




@media only screen and (max-width: 1279px), (max-device-width: 1279px) {
	/* For windows smaller than 1280px */
.cardRow {display:initial !important;}
.triCard {width:100% !important;}
}