html, body {
	  height: 100%;
	  margin: 0;
	}

	body{
		font-family: 'Heebo', sans-serif;
background-color: #ffffff;
background-position: center 0px;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;

		background-image: url("https://wehaa-survey-prod.s3.amazonaws.com/gopherchoice/flexeditor/survey.survey/images/1.general.background_image.value.jpg");
	}

	.w-box-radius{
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
	}
	.w-box-padding{
		padding: 20px 20px 20px 20px;
	}

	ul{
		list-style: none;
	}

	.img-fluid,
	.img-thumbnail {
		width: 100%;
	}

	.gutter-l{
		padding-left: 20px!important;
	}
	.gutter-r{
		padding-right: 0;
	}


	/*****************************************************************************************
	SURVEY HEADER
	******************************************************************************************/
	header.header{
		margin-top: 0px;
margin-bottom: 20px;

display: hide;

		height: 80px;
		line-height: 80px;
	}
	header.header .logo{
		background-position: center center;
background-size: contain;
background-repeat: no-repeat;
width: 320px;
height: 80px;
margin: 0 auto 0 auto;

hyperlink-target: ['Header']['logo']['hyperlink-target'];

		background-image: url("");
	}
	header.header .logo a{
		display: block;
		width: 100%;
		height: 100%;
	}
	header.header .logo-tablet{
		background-position: center center;
background-size: contain;
background-repeat: no-repeat;
height: 80px;

		background-image: url("");
	}
	header.header .logo-mobile{
		background-position: center center;
background-size: contain;
background-repeat: no-repeat;
height: 80px;

		background-image: url("");
	}


	/*****************************************************************************************
	FOOTER
	******************************************************************************************/
	.footer-push{
		height: 110px;
	}
	footer.footer{
		height: 110px;
color: #ffffff;
margin-top: 300px;
background-color: #0F0F0F;
display: show;

	}
	footer.footer .container{
		height: 100%;
	}
	footer.footer .footer-wrapper{
		height: 100%;
background-color: #0F0F0F;
padding-top: 20px;
padding-bottom: 20px;

	}
	footer.footer .logo{
		background-position: center center;
background-size: contain;
width: 320px;
height: 80px;
margin: 0 auto 0 auto;

		background-image: url("");
		background-repeat: no-repeat;
	}
	footer.footer .logo a{
		display: block;
		width: 100%;
		height: 100%;
	}
	footer.footer .logo-mobile{
		background-image: url("");
	}


	/*****************************************************************************************
	AUTOCOMPLETE
	******************************************************************************************/
	.twitter-typeahead{
        width: 100%;
    }
    .typeahead,
    .tt-query,
    .tt-hint {
      width: 396px;
      height: 30px;
      padding: 8px 12px;
      font-size: 24px;
      line-height: 30px;
      border: 2px solid #ccc;
      -webkit-border-radius: 8px;
         -moz-border-radius: 8px;
              border-radius: 8px;
      outline: none;
    }

    .typeahead {
      background-color: #fff;
    }

    .typeahead:focus {
      border: 2px solid #687789;
    }

    .tt-query {
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
         -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
              box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    }

    .tt-hint {
      color: #999
    }

    .tt-menu {
      width: 422px;
      margin: 12px 0;
      padding: 8px 0;
      background-color: #fff;
      border: 1px solid #ccc;
      border: 1px solid rgba(0, 0, 0, 0.2);
      -webkit-border-radius: 8px;
         -moz-border-radius: 8px;
              border-radius: 8px;
      -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
         -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
              box-shadow: 0 5px 10px rgba(0,0,0,.2);
    }

    .tt-suggestion {
      padding: 3px 20px;
      font-size: 18px;
      line-height: 24px;
    }

    .tt-suggestion:hover {
      cursor: pointer;
      color: #fff;
      background-color: #687789;
    }

    .tt-suggestion.tt-cursor {
      color: #fff;
      background-color: #687789;

    }

    .tt-suggestion p {
      margin: 0;
    }




	/*****************************************************************************************
									S U R V E Y
	******************************************************************************************/

	/*****************************************************************************************
	SURVEY
	******************************************************************************************/
	.survey-title{
		display: block;
margin: 20px auto;
text-align: center;
font-size: 50px;
font-weight: bold;
color: #ffffff;
background-color: #003C57;

		height: 100px;
		line-height: 100px;
	}

	.surveyUserInfoForm form{
		background-color: rgba(255, 255, 255, 0.75);

	}
	.surveyUserInfoForm .surveyFormTitle,
	.survey-description-top h1{
		font-size: 24px;
font-weight: 500;
text-align: left;

		margin: 0 0 25px 0;
	}

	.surveyUserInfoForm label{
		font-weight: bold;
	}
	.error{
		color: #cc0000;
	}
	.btn{
		color: #ffffff;
background-color: #008CAC;

	}

	.share{
		background-color: #003C57;
font-size: 24px;
color: #ffffff;
text-align: center;
margin: 0 auto 20px auto;

	}
	.share .share-title{
	}
	.share ul{
		margin: 0;
		padding: 0;
		font-size: 36px;

	}
	.share ul li{
		display: inline-block;
		margin: 0 5px;
	}
	.share ul li,
	.share ul li a{
		color: #ffffff;
	}

	.survey-image{
		width: 100%;
		margin: 0 auto 20px auto;

hyperlink-target: ['Survey']['Main image']['hyperlink-target'];

	}
	.survey-description{
		background-color: rgba(255, 255, 255, 0.75);
color: #000000;

	}


	.surveySections{
		background-color: #ffffff;
color: inherit;

	}
	.surveySections h1{
		padding: 20px;
	}

	.surveySections .sections{
		margin: 0;
		padding: 0;
	}
	.surveySections .sections li{
		border-bottom: 1px solid #ccd0d5
	}
	.surveySections .sections li:first-child{
		border-top: 1px solid #ccd0d5
	}
	.surveySections .sections li:last-child{
		border-bottom: 0;
	}
	.surveySections .sections li span,
	.surveySections .sections li a{
		display: block;
		width: 100%;
		height: 100%;
		padding: 20px;
		text-decoration: none;
	}
	.surveySections .sections li a:hover{
		background-color: #ccd0d5;
color: inherit;

	}
	.surveySections .sections li.active span{
		background-color: #ccd0d5;
color: inherit;

	}
	.surveySections .sections li.inactive span{
		color: #a0a0a0;
background-color: #e5e5e5;

	}



	.surveySectionForm .surveyFormTitle{
		margin: 0 auto 20px auto;
text-align: center;
font-size: 36px;
font-weight: bold;
background-color: #ffffff;

		height: 80px;
		line-height: 80px;
	}
	.surveySectionForm .surveyFormField{
		background-color: #ffffff;

	}

	.form-check-image{
        position: relative;
    }
    .form-check-image-input{
        position: absolute;
        top: 10px;
        left: 25px;
    }
    .form-check-image-img{
        width: 100%;
min-height: 228px;
background-color: transparent;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
border: 1px solid #ccd0d5;
margin-bottom: 10px;

    }

    .form-control-file-image{
        width: 100%;
min-height: 228px;
background-color: transparent;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
border: 1px solid #ccd0d5;
margin-bottom: 10px;

        background-image: url("");
    }



	/*****************************************************************************************
	R E S P O N S I V E  L A Y O U T
	******************************************************************************************
	/* T A B L E T */
	@media  all and ( min-width: 576px ) and ( max-width: 960px ) {
		header.header{
			margin-top: 0px;
margin-bottom: 20px;

			height: 80px;
			line-height: 80px;
		}
	}

	/* M O B I L E */
	@media  all and ( max-width: 576px ) {
		.gutter-l{
			padding-left: 0;
		}
		.gutter-r{
			padding-right: 0;
		}

		.survey-item{
			padding-left: 0;
			padding-right: 0;
		}

		header.header{
			margin-top: 0px;
margin-bottom: 20px;

			height: 80px;
			line-height: 80px;
		}
	}


	/*****************************************************************************************
	R E S P O N S I V E   S U R V E Y
	******************************************************************************************/
	@media  all and ( max-width: 576px ) {
		.gutter-l{
			padding-left: 0!important;
		}
		.survey-title{
			font-size: 24px;
		}
		.surveyForm .buttons > div{
			padding: 0;
		}
		#finalize_ballot_btn,
		#submit_ballot{
			display: block;
			float: none!important;
			width: 100%;
		}

		#finalize_ballot_btn{
			margin-bottom: 20px;
		}
	}