/* flex fix */

body { background-color:#f0f4f7; font-family:"Open Sans", sans-serif; }
.template { text-align: left; background-color:#fff; }
h1 { padding:20px 0 20px 0; font-size:2.5rem; }
h2 { font-weight:200; }
.navbar { padding:0; margin:0; }
.maincontainer { -webkit-box-shadow: 0px 5px #000000; -moz-box-shadow: 0px 5px #000000; box-shadow: 0px 5px #000000; }
.maincontainer .formcontainer { padding:2rem 0 2rem 0; margin-left:45px; }
footer { background-image:url('../images/gradient-next-steps.png'); background-repeat:repeat-x; background-position:top; background-color:#f0f4f7; }
footer .container-fluid { padding:0 !important; }
/* Step Forms */
.stepheading { padding:1rem 0 1rem 0; }
.stepheading h2 { margin:23px 0 0 -15px; }
.stepcircle { border-radius: 50%; display: inline-block; width:90px; height:90px; position:relative; left:-44px; text-align:center; float:left; }
.stepcircle span { position:relative; left:-5px; }
.stepcircle .current { line-height:90px; color:#fff; font-size:1.5rem; }
.stepcircle .of { line-height:50px; color:#fff; font-size:0.8rem; }
.stepcircle .total { line-height:50px; color:#fff; font-size:0.8rem; }
.stepwrapper { margin-left:75px; }
a.steplink, a.optionlink { text-align:center; padding:1rem; padding-top:120px; display:block; width:100%; height:195px; color:#1c2227; background-color:#f0f4f7; border:1px solid #d3dce3; border-radius:5px; display:table; background-repeat:no-repeat; background-position: center 5px; background-size: 125px; }
a.steplink span, a.optionlink span { display:table-cell;vertical-align:middle; font-size:1.1rem; }

a.steplink.multiple {background-image:url('../images/icon-multiple.png');}
a.steplink.kitchen {background-image:url('../images/icon-kitchen.png');}
a.steplink.bathroom {background-image:url('../images/icon-bathroom.png');}
a.steplink.exterior {background-image:url('../images/icon-exterior.png');}
a.steplink.doors {background-image:url('../images/icon-keys.png');}
a.steplink.lighting {background-image:url('../images/icon-lighting.png');}
a.steplink.walls {background-image:url('../images/icon-walls.png');}
a.steplink.heating {background-image:url('../images/icon-heating.png');}
a.steplink.other {background-image:url('../images/icon-other.png');}

a.optionlink.radiator {background-image:url('../images/icon-heating.png');}
a.optionlink.extractor {background-image:url('../images/icon-extractor.png');}
a.optionlink.hob {background-image:url('../images/icon-hob.png');}
a.optionlink.oven {background-image:url('../images/icon-oven.png');}
a.optionlink.microwave {background-image:url('../images/icon-microwave.png');}
a.optionlink.appliances {background-image:url('../images/icon-appliances.png');}
a.optionlink.sinksandtaps {background-image:url('../images/icon-sinksandtaps.png');}
a.optionlink.units {background-image:url('../images/icon-units.png');}
a.optionlink.flooring {background-image:url('../images/icon-flooring.png');}
a.optionlink.shower {background-image:url('../images/icon-bathroom.png');}
a.optionlink.bath {background-image:url('../images/icon-bath.png');}
a.optionlink.toilet {background-image:url('../images/icon-toilet.png');}
a.optionlink.basin {background-image:url('../images/icon-basin.png');}
a.optionlink.boiler {background-image:url('../images/icon-boiler.png');}
a.optionlink.hotwatertank {background-image:url('../images/icon-hotwatertank.png');}
a.optionlink.guttering {background-image:url('../images/icon-guttering.png');}
a.optionlink.chimney {background-image:url('../images/icon-chimney.png');}
a.optionlink.roofing {background-image:url('../images/icon-roofing.png');}
a.optionlink.garden {background-image:url('../images/icon-exterior.png');}
a.optionlink.windows {background-image:url('../images/icon-windows.png');}
a.optionlink.walls {background-image:url('../images/icon-walls.png');}
a.optionlink.ceiling {background-image:url('../images/icon-ceiling.png');}
a.optionlink.keys {background-image:url('../images/icon-keys.png');}
a.optionlink.doors {background-image:url('../images/icon-doors.png');}
a.optionlink.locks {background-image:url('../images/icon-locks.png');}
a.optionlink.garage {background-image:url('../images/icon-garage.png');}
a.optionlink.sockets {background-image:url('../images/icon-sockets.png');}
a.optionlink.switches {background-image:url('../images/icon-lightswitches.png');}
a.optionlink.lightfitting {background-image:url('../images/icon-lightfitting.png');}
a.optionlink.other {background-image:url('../images/icon-other.png');}

a.curlink { background-color:#e0eaf1 !important; border:1px solid #c8d4dd !important; color:#000000 !important; }
.steplink:hover, .optionlink:hover { color:#1c2227; background-color:#e8ecef; border:1px solid #c8d4dd; cursor:pointer; text-decoration:none; }
.steplinks .row, .optionlinks .row { margin-bottom:15px; }
.steplinkouter { margin-bottom:30px; }
.previous { background-image:url('../images/gradient-previous-steps.png'); background-repeat:repeat-x; background-position:top; background-color:#f0f4f7; }
.previous .formcontainer { padding:2rem 0 15px 0; margin-left:45px; border-left:1px solid #e2e8ee; }
.previous-btm { background-image:url('../images/gradient-previous-btm.png'); background-repeat:repeat-x; background-position:bottom; background-color:#f0f4f7; height:10px; }
.previous-btm .formcontainer { margin-left:45px; border-left:1px solid #e2e8ee; }
.previousstepheading h2 { margin:0 0 15px 45px; font-size:1.4rem; color:#b9bdc0; font-weight:100; line-height:30px; }
.tickcircle { border-radius: 50%; display: inline-block; width:30px; height:30px; position:relative; left:-15px; text-align:center; background-color:#fff; }
.tickcircle i.fa { position:relative; text-align:center; line-height:30px; color:#04a400; }
.next .formcontainer { padding:2rem 0 2rem 0; margin-left:45px; border-left:1px solid #e2e8ee; }
.next h2 { color:#1d2228;  margin:0 0 15px 75px;  font-size:1rem; }
.nextstep { border-radius: 50%; display: inline-block; width:30px; height:30px; position:relative; left:-15px; text-align:center; background-color:#fefefe; }
.nextstepheading h2 { margin:0 0 15px 45px; font-size:1rem; color:#b9bdc0; font-weight:100; line-height:30px; }
.nextstep span { position:relative; text-align:center; line-height:30px; color:#c0c0c0; }
#confirm { /*position:relative; top:5px;*/ margin:-3px 15px 0 5px; height:32px; min-width: 20px; }
#optionalCheckbox { margin:-3px 15px 0 5px; height:32px; min-width: 20px; }
#stepLinkWrapper { margin-top:30px; }
#additionalInformationWrapper, #optionLinkWrapper, .suboption { display:none; margin-top:30px; }
#selectedProblem { /* display:none; */ }
#selectedProblem .spacer { display:none; }
#problem-title { padding-right:5px; }
#problem-text { display:none; padding-right:5px; }
#option-text { display:none; padding-right:5px; }

/* Photo upload */
.photo-upload { width:100%; background-color:#f0f4f7; border-radius:5px; border:1px solid #d3dce3; padding:1rem; min-height:230px; text-align:center; }
/* IE 11 only */
.photo-upload:hover { background-color:#e0eaf1; border:1px solid #c8d4dd; cursor:pointer; }
#confirmform .photo-upload:hover { cursor:default; }
.photo-upload .iconwrap { border-radius: 50%; display: inline-block; width:60px; height:60px; text-align:center; background-color:#fff; /* margin:30px auto 0 auto; */ }
*::-ms-backdrop, .photo-upload .iconwrap { margin-top:75px; }
.photo-upload .iconwrap i.fa { color:#1c2227; font-size:2rem; line-height:60px; font-weight:100; }
.photo-upload:hover .iconwrap { background-color:#fafafa; }
.photo-upload:hover .iconwrap i.fa { color:#000; }
.photo-upload .uploadinput {  }
.btn { text-transform:uppercase; min-width:100%; max-width:110px; }
.buttons { margin-top:2rem; }
.buttons .btn:hover { cursor:pointer; }
.btn-primary { background-color:#1c2227; color:#fff; border-color:#1c2227; display:block; }
.btn-primary:hover { background-color:#18191a; color:#fff; border-color:#000000; }
.btn-primary.disabled, .btn-primary:disabled:hover { background-color:#eaeced; border-color:#eaeced; color:#d5dde3; cursor:pointer; }
.btn-secondary { background-color:#d5dde3; color:#1c2227; border-color:#bbc9d3; display:block; }
.btn-secondary:hover { background-color:#c8d5df; color:#171e24; border-color:#9db7c9; }
.hiddenphoto { display:none; }
#uploaderrors { display:none; margin-top:30px; padding-bottom:0; }
#uploaderrors p { display:none; }
.uploaded-photo { margin-bottom:30px; }
.uploaded-photo .col { max-height:190px; overflow:hidden; }

.removePhoto { position:absolute; top:5px; right:20px; font-size:24px; z-index:500; border-radius: 50%; display: inline-block; width: 40px; height: 40px; }

/* placeholders */
.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #b9bdc0; font-weight:100;
}
.form-control::-moz-placeholder { /* Firefox 19+ */
  color: #b9bdc0; font-weight:100;
}
.form-control:-ms-input-placeholder { /* IE 10+ */
  color: #b9bdc0; font-weight:100;
}
.form-control:-moz-placeholder { /* Firefox 18- */
  color: #b9bdc0; font-weight:100;
}
select:invalid, select option[value=""] {
  color: #b9bdc0; font-weight:100;
}

.form-message { font-style:italic; font-size:14px; margin:0 0 20px 0; padding:0; }

.recaptchaerrouter iframe { border:1px solid red; }

#detailsform { max-width:600px; }

#confirmform .leftcol { width:30%; }

.complete { border-left:1px solid #04a400 !important; }
.complete .stepcircle { background-color:#04a400 !important; }
.complete .stepcircle .fa-check { color:#fff; font-size:2rem; line-height:90px; }

#ytWidget {     
    /*
    position: absolute;
    right:0;
    top:20px;
    */
    transition: all 0.2s ease;
}
#yt-widget a.yt-servicelink { display:none !important; }

@media (min-width: 100px) and (max-width: 1000px) {
	.navbar { padding: .5rem 1rem; }
	h1 { font-size:1.7rem; }
	h2 { font-size:1.2rem; }
	.formcontainer { margin-left:0 !important; border-left:none !important; }
	.stepcircle { display:none; }
	.tickcircle { left:0; }
	.stepwrapper { margin:0 !important; }
	.stepheading { padding:0; }
	.stepheading h2 { margin:0 0 20px 0; }	
	.btn { text-transform:uppercase; max-width:100%; min-width:100%; }
	a.steplink span, a.optionlink span { font-size: 1.01rem; }
	.photo-upload { margin-bottom:30px; }
	.uploaded-photo { margin-bottom:0; }
	#confirmform .leftcol { width:50%; }
	.nextstep { left:0; }
}