@import url(https://fonts.googleapis.com/css?family=Montserrat:100,300,500,700,900);

	.primary {
		margin-top: 0px !important;
	}
	.overlay {
		z-index: 10;
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(0,0,0,0.8);
	}
	.overlayCapture {
		z-index: 20 !important;
	}	
	.quizWrapper {
		padding: 40px 0px;
		background-color: #cfdee5;
	}
	.quizContainer {
		position: relative;
		z-index: 15;
		box-sizing: border-box;
		max-width: 900px;
		padding: 0px;
		margin: 0px auto;
		border-style: solid;
		border-width: 3px;
		border-color: #FFFFFF;
		border-radius: 10px;
		font-family: Montserrat;
		font-size: 100%;
		box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, .1);
		overflow: hidden;
	}

	.quizContainer p {
		font-size: 120%;
	}

	.quizCaptureContainer {
		position: relative;
		z-index: 30;
		box-sizing: border-box;
		margin: 0px auto;
		font-size: 120%;

	} 
	.quizCapture {
		box-sizing: border-box;
		margin-top: 50px;
		max-width: 600px;
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0%);
		padding: 5px 20px ;
		font-family: Montserrat;
		text-align: centre;
		font-weight: normal;
		background-color: #FFFFFF;
		border-radius: 10px;
		box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, .3);
		transition: all 0.3s ease-in;
	}
	.quizCapture h1 { 
		margin: 10px 0px 20px 0px !important;
		padding: 0px;
		color: #0770b8 !important	
	}
	
	.quizCapture p { 
		text-align: center;
		line-height: 140%;
	}
	.quizCapture a { 
		text-decoration: none;
		color: #0770b8 !important;	
	}
	.quizCapture a:hover { 
		text-decoration: underline;
		color: #0770b8 !important;	

	}

	.quizCapture .actionButton { 
		text-decoration: none;
		color: #FFFFFF !important;	
	}
	.quizCapture .actionButton:hover { 
		text-decoration: none;
		color: #FFFFFF !important;	
	}


	.quizCapture input {
		width: 100%;
		margin-bottom: 10px;
		padding: 15px;
		font-size: 100%;
		font-weight: normal;
		border-radius: 25px;
		border-style: solid;
		border-width: 1px;
		border-color: #d5e8f4;
		color: #000000;	
	} 

	.quizCapture input::placeholder {
		color: #888888;	
	}

	.spinner {
		color: #0770b8 !important;	
	}
	.inputError {
		border-color: red !important;
	}


	.quizCapture button {
		cursor: pointer;
		float: left;
		margin: 10px 0px 30px 0px;
		padding: 15px 25px;
		border-style: solid;
		border-width: 1px;
		border-radius: 25px;
		border-color: #d5e8f4;	
		background-color: #4ea7dd;
		color: #FFFFFF;
		font-size: 100%;
		text-decoration: none;
		transition: all 0.5s ease-in;
		
	}
	.quizCapture button:hover {
		background-color: #0770b8;
		transition: all 0.1s ease-in;
	}
	.quizCapture button:disabled {
		background-color: #FFFFFF !important;
		color: #AAAAAA !important;
	}
	.quizCapture button:disabled:hover {
	}
	.quizCaptureSelect {
		display: block;
		padding: 15px 20px;
		width: 100%;
		max-width: 100%; /* useful when width is set to anything other than 100% */
		margin-bottom: 10px;
		font-size: 100%;
		font-weight: normal;
		line-height: 1.3;
		box-sizing: border-box;
		border-radius: 25px;
		border-style: solid;
		border-width: 1px;
		border-color: #d5e8f4;	
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;
		background-color: #fff;
		background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
		linear-gradient(to bottom, #ffffff 0%,#FFFFFF 100%);
		background-repeat: no-repeat, repeat;
		/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
		background-position: right .7em top 50%, 0 0;
		/* icon size, then gradient */
		background-size: .65em auto, 100%;
	}
	/* Hide arrow icon in IE browsers */
	.quizCaptureSelect::-ms-expand {
	  display: none;
	}
	/* Hover style */
	.quizCaptureSelect:hover {
	  border-color: #888;
	}
	/* Focus style */
	.quizCaptureSelect:focus {
	  border-color: #aaa;
	  /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
	  box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	  box-shadow: 0 0 0 3px -moz-mac-focusring;
	  color: #222; 
	  outline: none;
	}

	/* Set options to normal weight */
	.quizCaptureSelect option {
	  font-weight: normal;
	}
	/* Disabled styles */
	.quizCaptureSelect:disabled, .quizCaptureSelect[aria-disabled=true] {
	  color: graytext;
	  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
		linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	}
	.quizCaptureSelect:disabled:hover, .quizCaptureSelect[aria-disabled=true] {
	  border-color: #aaa;
	}
	
	.quizCaptureClose {
		margin-top: -5px;
		margin-right: -15px;
	}
	.quizCaptureClose i {
		color: red;
	
	}

		
	.messageError {
		margin: 25px 0px;
		color: red;
		font-weight: 700;
	}
	.messageError span, .messageError a {
		color: #000000;
		font-weight: normal;
	}
	
	.messageErrorList {
		text-align: left !important;
	}
	
	.quizHead {
	}
	.quizContent {
		z-index: 15 !important;
		-webkit-user-select: none;  /* Chrome all / Safari all */
  		-moz-user-select: none;     /* Firefox all */
 		-ms-user-select: none;      
		padding: 20px 20px 0px 20px;
		min-height: 250px;
		box-sizing: border-box;
		text-align: center;
		background-color: #FFFFFF;
	}
	.quizContent h1 {
		font-size: 250%;
	}	
	.quizContent button, .actionButton {
		display: inline-block;
		cursor: pointer;
		margin: 10px auto 40px auto;
		padding: 15px 35px;
		border-style: solid;
		border-width: 4px;
		border-radius: 50px;
		border-color: #d5e8f4;	
		background-color: #4ea7dd;
		color: #FFFFFF;
		font-size: 100%;
		font-weight: normal;
		text-decoration: none;
		transition: all 0.5s ease-in;
		
	}
	.quizContent button:hover, .actionButton:hover {
		background-color: #0770b8;
		transition: all 0.1s ease-in;
	}
	.quizTitle {
	}
	.quizImage {
		width: 100%;
		max-width: 500px;
		height: auto;
	}	
	
	.quizMessage {
	}
	
	
	.quizMessage h1 {
		padding: 40px 10px 0px 10px;
	}
	.quizMessage h3 {
		max-width: 600px;
		margin: auto;
		padding: 30px 20px 10px 20px;
		font-size: 240%;
		font-weight: 700;
	}
	.quizMessage small {
		color: #4ea7dd
	}
	
	.quizMessage span {
		display: inline-block;
		min-width: 30px;
		margin-right: 5px;
		margin-top: -5px;
		padding: 5px 3px;
		border-radius: 5px;
		background-color: #4ea7dd;
		font-size: 70%;
		color: #FFFFFF;
	}
		
	.quizOptions {
		width: auto;
		box-sizing: border-box;
		margin: 30px auto;
		text-align: center;
	}
	.quizOptions img {
		height: 150px;
		width: 150px;
	}

	.quizOptions p {
		font-size: 130%;
	}		
	.quizOptions p span {
		display: inline-block;
		margin-right: 10px;
		padding: 2px 5px;
		background-color: #4ea7dd;
		border-radius: 5px;
		color: #FFFFFF;
		text-transform: uppercase;
		font-size: 90%;
	}		

	.quizOptionTile {
		display: inline-block;
		box-sizing: border-box;
		margin: 10px;
		padding: 10px;
		width: 220px;
		border-radius: 5px;
		border-style: solid;
		border-width: 3px;
		border-color: #FFFFFF;
		box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, .1);
	}
	
	.quizOptionTileAnimation {
		position: relative;
  		animation: mymove 1.2s;
	}

	@keyframes mymove {
		from {top: 40px;}
		to {top: 0px;}
		0% {opacity:0;}
		100% {opacity:1;}
	}
	.quizOptionTile:hover {
		background-color: #f0f5f8;
	}

	.quizResponse {
		padding: 0px 0px;
	}
	
	.quizResponse h2 {
		font-weight: 700 !important;
		margin-bottom: 15px !important;
		color: #4ea7dd;
	
	}

	.quizResponse h4 {
		font-weight: 700 !important;
		color: #4ea7dd;
	}
	
	.quizTotalContainer .cell {
		text-align: left;
		vertical-align: top;
	}
	
	.quizRecommendationIconContainer {
		padding: 0px;
		margin: 0px;
		max-width: 200px;
	}
	
	.quizTotalContainer h1 {

		float: left;
		margin: auto;
		padding: 0px 20px;
		font-size: 160px;
		text-align: center;
	}
	.quizTotalContainer h1 i {
	}
	.quizTotalContainer h2 {
		font-size: 200%;
		margin-bottom: 5px;
		color: #000000;
	}
	.quizTotalContainer h3 {
		margin-bottom: 5px;
		padding: 0;
		color: #4ea7dd;
	}
	.quizTotalContainer h4 {
		color: #000000 !important;
	}
	.quizTotalContainer p {
		margin-top: 0px;
	}


	.quizTotalOverview {
		font-size: 90%;
		font-weight: normal;
	}
	
	.quizCTA {
		display: block;
		margin: 20px 0px 0px 0px;
	}
	.quizCTA h3 {
		padding: 0px;
		margin: 40px 0px 10px 0px;
	}
	
	.quizCTAContent {
		display: block;
		margin: 20px 0px 0px 0px;
	}

	.quizTotalCategoryContainer {
		margin: 0px 5px 40px 0px;
		border-radius: 20px;
		background-color: #f2f2f2;
	}
	
	.quizTotalCategoryContainer .cell {
		width: 33%;	
		text-align: center;
	}
	
	

		
	.quizTotalCategoryContainer h1 {
		margin-top: 5px;
		margin-bottom: 20px;
		padding: 20px 0px;
		min-width: 130px;
		width: 100%;
		font-size: 500%;
		line-height: 100%;
		text-align: center;
		border-radius: 10px;
		border-style: none;
		border-color: #000000;
		color: #000000;
		background-color: #FFFFFF;
	}
	
	
	.quizTotalCategoryContainer h3 {
		margin: 0px 5px 5px 5px;
		padding: 0;
		font-size: 100%;
		font-weight: 700 !important;

	}
	.quizTotalCategoryContainer p {
		margin: auto 5px;
		font-weight: normal !important;
		font-size: 80%;
		line-height: 140%;
	}
	
	#quizStatusProgress {
		height: 6px;
		border-radius: 3px;
		width: 0px;
		background-color: #4ea7dd;
		transition: all 1s ease-in;
	}

	.quizStatus {
		padding: 20px;
	}
	.quizStatusBar {
		height: 6px;
		margin: 20px 40px 0px 40px;
		background-color: #EAEAEA;
		border-radius: 3px;
	}	

	.quizFoot {
		font-size: 80%;
	}
	.quizFoot span {
		display: inline-block;
		margin: 0px 15px;
	}		
	.quizFoot a {
		display: inline-block;
		margin: 0px 5px;
		padding: 5px 10px;
		border-style: solid;
		border-width: 1px;
		border-radius: 25px;
		border-color: #4ea7dd;
		color: #4ea7dd;
	}
	
	
	.responsiveImage {
		width: 100%;
		height: auto;
	}	
	

    .table {
		width: 100%;
		display: table;
    }

    .row {
       display:table-row;
    }

    .cell
    {
		display: table-cell;
		box-sizing: border-box;
		vertical-align: top;
		padding: 20px;
    }
    .cellTop {
    	vertical-algin: top;
    }
  
	.textLeft{
		text-align: left;
	}
	.textCenter {
		text-align: center;
	}
	.textRight {
		text-align: right;
	}

	.floatLeft{
		float: left;
	}
	.floatCenter {
		float: center;
	}
	.floatRight {
		float: right;
	}
    
    .hidden {
    	display: none;
    	height: 0px;
    	width: 0px;
    }
    
	.clear {
		clear: both;
	}
	
	

@media 
	only screen and (max-width: 800px)
 {
 	.hideMobile {
 		display: none;
 	}
 	
 	.quizContainer {
 		border-radius: 0px;
 	}

 	.quizOptionTile {
 		display; block;
 		width: 90%;
 		text-align: left;
 		clear: both;
 		float: none;
 		font-size: 130%;
 		padding: 30px 10px;
 	}
 	.quizOptionTile p {
 		padding: 0px;
 		margin: 0px;
 	}
 	
 	.quizOptionTile p span {
 		margin-left: 20px;
 		margin-right: 20px;
	}	
 	.table .row .cell {
 		display: block !important;
 		clear: both;
 		width: 100% !important;
 	}

	.quizRecommendationIconContainer {
		display: block;
		position: relative;
		margin: auto;
		clear: both;
	}

	.quizRecommendationIconContainer h1 {
		display: block;
		margin: 0px auto !important;
		position: relative;
		float: none;
		clear: none;
	}
	
	.quizCategoryScore h1 {
		margin: 10px auto;
		width: 100px;
	}
	
	.quizTotalContainer .cell {
		text-align: center;
	}

	.quizCapture {
		width: 90%;
		max-width: 90%;
	}



 	
 }