@font-face {
    font-family: 'ubuntubold';
    src: url('../fonts/ubuntu-bold-webfont.eot');
    src: url('../fonts/ubuntu-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ubuntu-bold-webfont.woff') format('woff'),
         url('../fonts/ubuntu-bold-webfont.ttf') format('truetype'),
         url('../fonts/ubuntu-bold-webfont.svg#ubuntubold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'ubuntulight';
    src: url('../fonts/ubuntu-light-webfont.eot');
    src: url('../fonts/ubuntu-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ubuntu-light-webfont.woff') format('woff'),
         url('../fonts/ubuntu-light-webfont.ttf') format('truetype'),
         url('../fonts/ubuntu-light-webfont.svg#ubuntulight') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'ubuntumedium';
    src: url('../fonts/ubuntu-medium-webfont.eot');
    src: url('../fonts/ubuntu-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ubuntu-medium-webfont.woff') format('woff'),
         url('../fonts/ubuntu-medium-webfont.ttf') format('truetype'),
         url('../fonts/ubuntu-medium-webfont.svg#ubuntumedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

#simplemodal-container a.modalCloseImg {
	background:url('../img/modalclose.png') no-repeat; /* adjust url as required */
	width:25px;
	height:29px;
	display:inline;
	z-index:3200;
	position:absolute;
	top:-15px;
	right:-18px;
	cursor:pointer;
}
div#simplemodal-container {
	background: #fff;
	border-radius: 10px;
}
div#simplemodal-overlay {
	background: #000;
}
div#modalbox {
	text-align: center;
}
	div#modalbox h2 {
		font-size: 24px;
		font-weight: bold;
		padding: 10px;
		margin: 30px 0 0 0;
	}
	div#modalbox h3 {
		font-size: 20px;
		font-weight: bold;
		padding: 7px 10px;
		margin: 0;
	}
	div#modalbox p {
		font-size: 16px;
		font-weight: normal;
		padding: 5px 10px 8px 10px;
		margin: 0;
	}

div#simplemodal-container {
	background: #fff;
	border-radius: 10px;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

select.custom {
  padding: 0px;
  margin-bottom: 10px;
}
a.disabled {
	opacity: .2;
	cursor: default;
}

.largebutton {
	border-radius: 5px;
	padding: 8px 130px;
	border: none;
	box-shadow: 5px 5px #cfd3d9;
	font-size: 36px;
	color: #fff;
	text-align: center;
	display: inline-block;
	background: #f37c2a;
	cursor: pointer;
}
a.largebutton.widetextbutton {
	padding: 8px 50px;
}
a.largebutton:hover {
	color: #f9e3d4;
	text-decoration: none;
	box-shadow: 3px 3px #ccc;
}

.aligncenter {
	text-align: center;
}
.textcenter {
	text-align: center;
	padding-top: 20px;
}

.washedtext {
	color: #888;
}

body {
	font-family: 'ubuntumedium', sans-serif;
	font-size: 16px;
	font-weight: normal;
	background:#fff;
}

#instructions {
	position: relative;
	top: -80px;
}

#header {
	background: #fff;
}
	#logo {
		padding:20px 0;
	}
		#logo img {

		}
		#logo h3 {
			font-size: 20px;
			color:#231f20;
			padding: 13px 0 0 0;
			text-align: right;
			margin: 0;
			font-family: 'ubuntulight', sans-serif;
		}
	#progress {
		border-top:1px solid #a2d4de;
	}
		#progress .bar {
			background:#16749e;
			width:0%;
			text-align: right;
		}
			#progress .bar span {
				font-size: 12px;
				color: #fff;
				font-weight: normal;
				font-family: 'ubuntubold', sans-serif;
				display: block;
				text-align: right;
				padding: 5px 15px 5px 0;
			}

#hero {
	background: url('../img/picture-background.png');
	padding: 30px 0;
	text-align:center;
}
	#hero .container {
		position: relative;
	}
		#hero #floater {
			position: absolute;
			right: 40px;
			bottom: -85px;
		}
		#hero #dotted {
			position: absolute;
			right: 200px;
			bottom: -60px;
		}
	#hero .row {

	}
		#hero h2 {
			color:#fff;
			font-family: 'ubuntulight', sans-serif;
			font-weight: normal;
			font-size: 30px;
		}
		#hero h1 {
			color:#357180;
			font-family: 'ubuntulight', sans-serif;
			font-weight: normal;
			font-size: 46px;
			letter-spacing: -2px;
			word-spacing: -1px;
		}
		#hero p {
			color: #fff;
			font-family: 'ubuntulight', sans-serif;
			font-weight: normal;
			font-size: 18px;
			padding: 0 0 30px 0; 
		}

#content {
	background: #eee url('../img/noise-background.png') repeat;
	padding: 100px 0 50px 0;
}
#content.pad50 {
	padding-top:50px;
}
#content .instruction h3 {
	font-size:27px;
	color:#357180;
	padding:10px 0;
	font-weight:normal;
	font-family:'ubuntulight', sans-serif;
	text-align:center;
	margin:0 auto 25px auto;
	width:80%;
}
#steptwoform #content {
	padding:40px 0 20px 0;
}
#stepthreeform #content {
	padding:40px 0 20px 0;
}

	.comparerow {
		float: left;
		clear: both;
		width: 100%;
		display: none;
	}
	.comparerow.show {
		display: block;
		background: url('../img/or.jpg') no-repeat scroll 450px 190px rgba(0, 0, 0, 0);;
	}
		.passionitem {
			float: left;
			width: 50%;
			padding: 0 15%;
			text-align: center;
		}
		.passionitem h3 {
			text-transform: capitalize;
			margin: 30px 0 10px 0;
		}
		.passionitem p a {
			display: block;
			width: auto;
			padding: 10px;
			font-size: 18px;
			color: #fff;
			border-radius: 6px;
			background: #16749e;
		}
		.passionitem * {
			max-width: 100%;
		}
		.passionitem.center {
			width: 100%;
			padding: 20px 30% 50px 30%;
		}

		#choose > div {
			padding:0 0 10px 0; 
		}

		#choose #entrytext > h4 {
			font-size: 18px;
			font-weight: bold;
			color: #111;
			font-family: arial, sans-serif;
			padding:25px 0;
		}
		#choose #entrytext > p {
			font-size: 18px;
			font-weight:normal;
			color: #111;
			font-family: arial, sans-serif;
			padding:3px 130px 8px 130px;
		}
		.help p a {
			padding:30px 0;
			display: block;
		}

	h4.info {
		font-size: 18px;
		padding: 20px 0 0 0;
		color: #357180;
	}
	#content div > .row > div > h2 {
		text-align: center;
		color: #357180;
		padding: 0 0 10px 0;
	}
	.passion {
		float:left;
		width: 16%;
		margin:0 2%;
		text-align: center;
		height: 205px;
		position: relative;
	}
	.passion img {
		max-width: 100%;
	}
	.passiongridsort .passion {
		cursor: move;
	}
	.selectable-passions .passion {
		cursor: pointer;
	}
		.passion h3 {
			font-size: 20px;
			color: #44b4ad;
			text-transform: capitalize;
			padding: 4px 0 0 0;
			margin-top: 5px;
		}
		.passion .overlay {
			position: absolute;
			top: 0px;
			width: 100%;
		}
	.ui-sortable-helper {
		opacity: .7;
	}
	.sortable-placeholder {
		background: url('../img/target.jpg') no-repeat 50% 0;
		float:left;
		width: 18%;
		margin:0 1%;
		text-align: center;
		height: 280px;
		cursor: move;
	}

	form.form-horizontal.col-md-4.col-md-offset-4 {
		position: relative;
		top: -40px;
	}

	.control-group {
		
	}
		.control-group label {
			padding: 5px 0 5px 5px;
		}
		.control-group input[type=text] {
			width: 100%;
			margin:0 0 10px 0;
		}
		.control-group .largebutton {
			padding: 8px 121px;
		}

    .passionrow {
    	background: #fff;
    	border-radius:78px 0 0 78px;
    	width: 100%;
    	padding: 0;
    	margin:0; 
    	height:150px;
    }

.passionhelp {
	float:left;
	width: 50%;
	padding: 10px 2%;
	font-size: 14px;
}
.passionhelp .passionlabel {
	text-align: center; 
	float: left;
	width: 15%;
}
.passionhelp .passionlabel img {
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}
.passionhelp .passionlabel h3 {
	font-size: 11px;
	text-align: center;
	margin: 0;
	padding: 4px 0 0 0;
	text-transform: capitalize;
	color: #44b4ad;
}
.passionhelp .passiontext {
	font-size: 14px;
	padding: 5px 0 5px 5%;
	float: left;
	width: 80%;
}


    #steptwoform .passionrow {
    	margin-top: 10px;
    }
    	.passionrow .passion {
    		margin-left:0;
    		height: 240px;
    	}
    	#stepfourform .passionrow .passion {
    		margin-left:0;
    		height: 210px;
    	}
    	#steptwoform .passionrow .passion {
    		margin-left:0;
    		height: 190px;
    	}
    	.passionrow .passion h3 {
    		margin-top: 5px;
    	}
    	.passion .handle {
    		width: 100%;
    		height: 220px;
    		cursor: move;
    		z-index: 9999;
    		position: absolute;
    		display: block;
    		float: left;
    		top: 0px;
    		left: 0px;
    		right: 0px;
    		bottom: 0px;
    	}
    	.passionrow textarea {
			width: 70%;
			margin: 20px 20px 20px 50px;
			font-size: 18px;
			color: #999;
			border:2px solid #ccc;
			float: left;
			height: 117px;
			padding: 13px 10px;
		}
		.passionrow .mytext {
			width: 90%;
			margin: 10px 20px 0px 50px;
			font-size: 18px;
			color: #357180;
			float: left;
			height: 80px;
			border: none;
			padding: 0 10px 8px;
		}

	.ui-slider {
		position: relative;
		text-align: left;
		background: #eee;
		border: 0px solid #fff;
		height: 10px;
		width: 100%;
		margin: 30px 0px 0 27px;
		float: left;
	}
		.ui-slider-handle {
			top: -0.9em;
			margin-left: -.7em;
			position: absolute;
			z-index: 2;
			width: 1.4em;
			height: 2.2em;
			cursor: default;
			background: #428bca;
			border-radius: 10px;
			outline: 0!important;
			cursor: pointer;
		}

	.passion-slider {
		position: relative;
		width: 70%;
		float: left;
	}
		.slider-label {
			position: absolute;
			top: 90px;
			width: 8%;
			float: left;
			text-align:center;
			color: #999;
		}
		#sl0 {
			left: 0;
		}
		#sl1 {
			left:10%;
		}
		#sl2 {
			left:20%;
		}
		#sl3 {
			left:30%;
		}
		#sl4 {
			left:40%;
		}
		#sl5 {
			left:50%;
		}
		#sl6 {
			left:60%;
		}
		#sl7 {
			left:70%;
		}
		#sl8 {
			left:80%;
		}
		#sl9 {
			left:90%;
		}
		#sl10 {
			left:100%;
		}

#footer {
	text-align: center;
	padding: 40px 0 100px 0;
	background: #eee url('../img/noise-background.png') repeat;
}
	#footer h3,h3.inst {
		color:#357180;
		font-size: 27px;
		padding: 10px 0;
		font-family: 'ubuntulight', sans-serif;
		font-weight: normal;
	}

.passiongridsort .passion {
		cursor:default;
		width: 96%;
		margin:2px 2%;
		height: 60px;
		text-align: left;
		padding: 4px;
		border: 1px dotted #ccc;
	}
		.passion .handle {
    		width: 100%;
    		height: 54px;
    		cursor: move;
    		z-index: 9999;
    		position: absolute;
    		float: right;
    		top: 2px;
    		right: 2px;
    		bottom: 2px;
    		left: 2px;
    	}
    	.passion .handle span.arrows {
    		width: 10%;
    		position: absolute;
    		float: right;
    		top: 0px;
    		right: 0px;
    		bottom: 0px;
    		left:auto;
    		border-radius: 6px;
    		background: #16749e url('../img/move.png') no-repeat 50% 50%;
    		border: 1px solid #ccc;
    	}
		.passiongridsort .passion img {
			max-height: 50px;
			max-width: 50px;
			float: left;
			margin:0 20px 0 5px;
		}
		.passiongridsort .passion h3 {
			font-size: 18px;
			color: #44b4ad;
			text-transform: capitalize;
			padding: 2px 0 4px 5px;
			margin:0;
			display: block;
		}
		.passiongridsort .passion .excerpt {
			font-size: 12px;
			color: #999;
		}
	.passiongridsort .sortable-placeholder {
		width: 96%;
		margin:5px 2%;
		height:auto;
		float: left;
		clear: both;
		height: 60px;
		background: #fff;
		border: 1px dotted #eee;
	}


@media (max-width: 600px){
	
	.passionhelp {
		width: 100%;
	}


	.passionitem h3 {
		font-size: 18px;
	}
	.passionitem p a {
		font-size: 12px;
	}
	.comparerow.show {
		background-size: 40px;
	}
    .selectable-passions .passion {
		width: 46%;
	}
	.sortable-placeholder {
		width: 48%;
		height: 220px;
	}
	.largebutton {
		padding: 4px 70px;
		font-size: 24px;
		width: 100%;
	}
	#footer h3 {
		color: #357180;
		font-size: 20px;
		padding: 0 0 10px 0;
	}
	#footer {
		text-align: center;
		padding: 20px 0 30px 0;
	}
	div.passion-description {
		float: right;
		width: 60%;
		margin: 7px 10px 0 0;
	}

	#choose > div {
			padding:0 0 10px 0; 
		}

		#choose #entrytext > h4 {
			font-size: 16px;
			font-weight: bold;
			color: #111;
			font-family: arial, sans-serif;
			padding:15px 0;
		}
		#choose #entrytext > p {
			font-size: 16px;
			font-weight:normal;
			color: #111;
			font-family: arial, sans-serif;
			padding:3px 20px 8px 20px;
		}
		.help p a {
			padding:15px 0;
			display: block;
		}
		.passion_description {
			font-size: 11px;
		}


	.passionrow.sliderrow {
		height: 250px;
	}
	.passionrow.sliderrow .passion {
		width: 40%;
		text-align: center;
		margin:5px 0;
	}
	.passionrow.sliderrow .passion-slider {
		width: 100%;
		clear: both;
		height: 70px;
		margin: 10px 0 0 0;
	}
	.sliderrow {
		
	}
	.sliderrow {
		
	}
	.passionrow.sliderrow .mytext {
		position: absolute;
		top: -145px;
		left: 40%;
		margin: 0;
		padding: 0;
		width: 55%;
		height: 152px;
		overflow: hidden;
		font-size: 12px;
	}

	.passionrow.sliderrow .ui-slider {
		position: relative;
		text-align: left;
		background: #eee;
		border: 1px solid #999;
		height: 10px;
		width: 80%;
		margin: 52px 4% 0 4%;
		width: 92%;
		float: left;
	}
		.ui-slider-handle {
			top: -.3em;
			margin-left: -.6em;
			position: absolute;
			z-index: 2;
			width: 1.2em;
			height: 1.2em;
			cursor: default;
			background: #428bca;
		}

	.passion-slider {
		position: relative;
		width: 100%;
		float: left;
	}
		.slider-label {
			position: absolute;
			top: 30px;
			width: 8%;
			float: left;
			text-align:center;
			color: #999;
		}
		#sl0 {
			left: 0;
		}
		#sl1 {
			left:9%;
		}
		#sl2 {
			left:19%;
		}
		#sl3 {
			left:28%;
		}
		#sl4 {
			left:37%;
		}
		#sl5 {
			left:46%;
		}
		#sl6 {
			left:55%;
		}
		#sl7 {
			left:64%;
		}
		#sl8 {
			left:73%;
		}
		#sl9 {
			left:83%;
		}
		#sl10 {
			left:92%;
		}

		.passion .handle {
    		width: 10%;
    		height: 54px;
    		cursor: move;
    		z-index: 9999;
    		position: absolute;
    		float: right;
    		top: 2px;
    		right: 2px;
    		bottom: 2px;
    		left: auto;
    	}
    	.passion .handle span.arrows {
    		width: 100%;
    		position: absolute;
    		float: right;
    		top: 0px;
    		right: 0px;
    		bottom: 0px;
    		left:auto;
    		border-radius: 6px;
    		background: #16749e url('../img/move.png') no-repeat 50% 50%;
    		border: 1px solid #ccc;
    	}

}
@media (min-width: 601px) and (max-width: 979px) {
	div.passion-description {
		float: right;
		width: 70%;
		margin: 7px 10px 0 0;
	}
	.passion-slider {
		position: relative;
		width: 72%;
		float: left;
		margin: 0 0 0 2%;
	}
	.mytext {
		font-size: 14px;
	}
}
@media (max-width: 979px) {
	#hero #floater,#hero #dotted {
		display: none;
	}
	#content {
		padding: 40px 0 30px 0px;
	}

	.passionrow {
    	background: #fff;
    	border-radius:0;
    	width: 100%;
    	padding: 0;
    	margin:0; 
    	height:140px;
    }
    	.passionrow .passion {
    		margin:10px 0 0 20px;
    		height: 150px;
    		width: 92px;
    	}
    	.passionrow .passion h3 {
    		font-size: 12px;
    	}
    	.passionrow textarea {
			width: 100%;
			display: block;
			margin: 5px 5px 5px 102px;
			font-size: 14px;
			color: #357180;
			float: right;
			height: 117px;
			border: none;
			padding: 6px 10px;
		}
		.passionrow .mytext {
			width: 90%;
			margin: 10px 20px 0px 50px;
			font-size: 14px;
			color: #357180;
			float: left;
			height: 80px;
			border: none;
			padding: 13px 10px 8px 10px;
		}
}
@media (min-width: 980px) and (max-width: 1199px) {
	.sortable-placeholder {
		background-size: 100%;
		height: 180px;
	}
	.passionrow {
		height: 147px;
	}
	.passionrow .passion {
		height: 210px;
		float: left;
		width: 19%;
		margin:0;
	}
	.passionrow textarea {
		width: 65%;
		margin: 20px 20px 20px 50px;
		font-size: 18px;
		color: #357180;
		float: left;
		height: 117px;
		border: none;
		padding: 13px 10px;
	}
}

.check-box-marketing {
    width: 30px;
    float: left;
    padding: 0px;
    padding-left: 20px;
    margin: 0px;
}

.label-marketing {
    width: 320px;
    float: left;
    padding: 0px;
    margin: 0px;
    padding-left: 19px;
}

.footer-message {
    text-align: center;
    font-size: 12px;
}
body#stepthreeform {
    background: url("../img/noise-background.png") repeat scroll 0 0 #eee;
}

button.largebutton-finish {
    background: #f37c2a;
    color: white;
    padding: 5px 15px;
    border-radius: 7px;
    -moz-border-radius:7px;
    -webkit-border-radius: 7px;
    font-size: 30px;
    display: block;
    margin:10px auto;
    font-weight: 900;
    border:none;
    width:380px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.facebook-social-login {
    width: 200px;
    margin: auto;
}

.other-signin-services {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #000;
    padding: 15px 0px;
    margin: auto;
}

.twitter-social-login {
    margin: 0 auto;
}

.modal-body {
    text-align: center;
}

.social-notice {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #000;
    padding: 5px 0px;
    margin: auto;   
}

.social-modal-footer {
    padding: 5px 0px;
}

.social-modal-title {
    margin: auto;
    text-align: center;
    font-size: 24px;
}

#content.social-main-content {
    margin: auto;
    text-align: center;
    font-size: 22px;
    font-weight: normal;
    color: #357180;
    padding: 30px 0px 30px 0px;
}

.social-login-heading-icon {
    width: 100px;
    margin: 5px;
}

.social-login-header {
    padding: 5px 0px 25px 0px;
}

.header-images .header-images-icon{
    width: 80px;
    padding: 5px;
}

.header-images {
    margin-bottom: 20px;
}
.resend-activation-email {
    cursor: pointer;
}
.smallbutton {
    font-size: 14px;
	border-radius: 5px;
	padding: 8px 130px;
	border: none;
	box-shadow: 5px 5px #cfd3d9;
	color: #fff;
	text-align: center;
	display: inline-block;
	background: #f37c2a;
	cursor: pointer;

}