/* CSS Document */
@media screen and (max-width: 810px) {
	.diagnostic2, .diagmain, .diagmain p, .footerx2, .footerlinks, .container, .worksheet img, .cases-image {
		width: 100%;
	}
	#challenge-sidebar {
		width: 100%;
	}
	.mapicon {
		padding: 7px 15px;
	} 
	.left1, .right1 {
		padding: 13px 15px;
	}
	.diagmain, .footerx2, .solar {
		padding: 0px 20px;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
	#widget_sp_image-18, #widget_sp_image-19, #widget_sp_image-20, #widget_sp_image-21, #widget_sp_image-22, #widget_sp_image-23 {
		width: 28%;
		min-height: 295px;
		margin-bottom: 20px;
	}
	#widget_sp_image-18, #widget_sp_image-21 {
		margin-left: 28px;
	}
	.solar2 {
		-webkit-transform: scale(0.8);
		margin: 0% 0% 0% -20%;
		width: 100%;
	}
	#closey {
		margin-right: -20%;
	}
	.result {
		width: 100% !important;
	}
	.answerimage {
		bottom: 20px;
		right: 40px;
	}
	.answerbutton {
		float: left;
		clear: left;
	}
	.footerlinks, .ehdm {
		display: block;
	}
	.ehdm {
		float: none;
		padding: 20px 0px;
		margin: initial;
	}
	.container {
		padding: 0px 20px;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
	.stageintro, .accord {
		width: 55%;
	}
	.worksheet, .cases {
		width: 40%;
	}
	.logo {
		margin-left: 15px;
	}

}
@media screen and (max-width: 410px) {
	#closey {
		top:20px;
		left:0px;
		font-size:55px;
		right:initial;
	}
	.closex {
		font-size:35px;
	}
	.stageintro, .worksheet, .accord, .cases, .projectmap {
		width: 100%;
	}
	.left1, .right1 {
		padding: 24px 10px;
	}
	.skip {
		margin-top: 40px;
	}
	.skip::after {
		margin-left: 25px;
	}
	.diagmain h1 {
		font-size: 32px;
		margin-top: 40px;
	}
	.diagmain h1 img {
		float: left;
	}
	.diagmain p, .question p {
		font-size: 16px;
	}
	.footerlinks {
		text-align: center;
	}
	.dotstyle2-smalldotstroke li p {
		width: 170px;
	}
	.chose2 {
		font-size: 22px;
	}
	.result {
		font-size: 16px !important;
		line-height: 20px !important;
	}
	.answerimage, .hide-mobile {
		display: none;
	}
	.answerbutton {
		padding: 15px 25px;
		display: block;
	}
	.projectmap {
		width: 100%;
		left:100%;
	}
	.keyx {
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		bottom: 200px;
		left: 0px;
	}
	.solar {
		overflow: hidden;
		height: 700px;
		padding: 0px 10px;

	}
	.solar2 {
		transform: rotate(90deg) scale(0.6);
		-webkit-transform: rotate(90deg) scale(0.6);
		-moz-transform: rotate(90deg) scale(0.6);
		margin-left: -30%;
		margin-top: -55%;
	}
	.solarpanel1, .solarpanel2, .solarpanel3, .solarpanel4 {
		transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
	}
	.mapicon {
		padding: 18px 10px;
	}
	.show-mobile {
		display: block !important;
	}
	.diagnostic {
		height: 75px;
	}
	.openmap {
		float: right;
		padding: 17px 10px;
		border-left: none;
	}
	.pname {
		margin: 16px 0px 0px 10px;
		clear: both;
	}
	.cases {
		clear: both;
		margin-top: 20px !important;
	}
	.accord {
		margin-top: 40px;
	}
	.stageintro p {
		font-size: 16px;
	}
	.logo {
		padding-left: 20px;
		margin-left: 0px;
		margin-top:10px;
	}
	.left1, .mob-a {
		border-left: none !important;
	}
	.notsure {
		width: 100%;
		padding: 0px;
	}
	.solar {
		top: -625px;
	}
	.lineme {
		display:none;
	}
	.draggable {
		box-sizing: border-box;
		left:5%;
		width:90%;
		margin-left:0px;
		height:auto;
	}
	.fadedx {
		width:100%;
		box-sizing:border-box;
	}
	.social2 {
		left:143px;
		background-color:rgba(0, 0, 0, 0.4);
		padding-top:3px;
		padding-left:2px;
		padding-right:2px;
	}
	.worksheetx {
		width:100%;
		right:-100%;
	}
	.content4 {
		width:100%;
		min-height: 100px;
	}
	.stagebuttons {
		position:absolute;
		bottom:0px;
		display:block;
		width:100%;
	}
	.ui-accordion .ui-accordion-header {
		font-size: 20px !important;
	}
	#widget_sp_image-18, #widget_sp_image-19, #widget_sp_image-20, #widget_sp_image-21, #widget_sp_image-22, #widget_sp_image-23 {
		width: 100%;
		margin-left:0px;
		height: auto;
		margin-bottom: 15px;
		margin-top: initial;
		min-height: initial;
	}
	.getme {
		-webkit-transform: initial;
		width: auto;
		font-size: 32px;
		float: none;
	}.getmex {
		width: 100%;
		height: auto;
		float: none;
		text-align: left !important;
		top: 0px !important;
	}
	.getcontent {
		width: 100%;
		float: none;
		margin-top: 15px;
		margin-left: 0px;
	}
	.videox {
		width: 90%;
		float: none;
		margin-bottom: 15px;
		height:auto;
	}
	.videox img {
		width:100%;
		margin-top: 40px;
		clear:both;
	}
	.shape {
		padding: 15px 50px;
	}
}