::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #ababab;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #ababab;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #ababab;
}

/*MECHLANCE STUFF*/
button {border: none;}
@font-face {
	font-family: "Arvo-Bold";
	src: url('../fonts/Arvo-Bold.ttf');
}

@font-face {
	font-family: "Open Sans";
	src: url('../fonts/OpenSans-Light.ttf');
}

.mechFont {
	font-family: Arvo-Bold, Serif;
}

#greenButton {
	height: 40px;
	width: 180px;
	font-size: .8em;
	letter-spacing: .05em;
	font-weight: bold;
	text-shadow: 1px 2px 3px rgba(0, 0, 0, .2);
	color: white;
	margin-top: 6px;
	background-color: green;
	border-width: 0px;
	border-radius: 5px;
	background: -webkit-gradient(linear, left top, left bottom, from(#7DC23C), to(#42A23D));
	background: -moz-linear-gradient(top,  #7DC23C,  #42A23D);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7DC23C', endColorstr='#42A23D');
}

/*MOBILE NAVIGATION BAR*/
#container-nav {
  width:100%;
	height: 54px;
	position: fixed;
	text-align: center;
	background-color: #000;
	color: white;
	z-index: 1;
	max-width: 1600px;
}
#nav-left {
	float:left;
	padding-left: 10px;
	line-height: 54px;
}
#nav-center {
	margin-left: 40px;
	display: inline-block;
	line-height: 54px;
}
#nav-right {
	float:right;
	line-height: 54px;
	padding-right: 10px;
}
#back-text {font-size: .8em;}

/*HOME PAGE*/
.panelTitle {
	font-family: Arvo-Bold, Serif;
	text-align: center;
	padding-top: 40px;
	font-size: 2em;
	color: #044160;
}

/*PANEL1 - Login*/
#panel-1 {
	height: 637px;
	/*background: url(../img/panel1-bground.jpg) no-repeat;*/
	background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7) ), url('/static/app/img/panel1-bground2.jpg');
	background-repeat: no-repeat;
	background-position: center;
}

/* #container-p1{padding-top: 60px;} */

#tempTagline {
	font-size: 1.8em;
	font-weight: 100;
	color: white;
	margin: auto;
	padding-top: 40px;
	width: 250px;
	text-align: center;
}

#dt1 {
	display:none;
	font-size: 1.2em;
	font-weight: 100;
	letter-spacing: 2px;
	margin-left: 20px;
	color:white;
}

.socPadding {
	margin-top: 8px;
	margin-bottom: 8px;
}

#dt2 {display:none;}
#dt3 {
	margin-top: 20px;
	margin-bottom: 10px;
	text-align: center;
}
#dt4 {display: none;}
#idgaf {margin-right: 15px;}

#taglineGroup {
	display:none;
	margin-top: 142px;
	margin-left: 20px;
	width: 49%;
}

#stmt1 {
	color: white;
	font-size: 2.4vw;
}
#stmt2 {
	font-size: .76em;
	font-size: 1.46vw;
	font-weight: 200;
	color: lightblue;
	margin-top: 10px;
	line-height: 1.3em;
	letter-spacing: .05em;
	text-align: justify;
}

#stmt3 {
	color: white;
	font-size: 1.4em;
	letter-spacing: .1em;
	margin-top: 180px;
	margin-left: 60px;
}
#stmt4 {
	color: #7d7d7d;
	font-size: .92em;
	margin-top: 6px;
	font-weight: 500;
	margin-left: 60px;
}

/*PANEL2 - How it works*/
#panel-2 {
	background-color: #f8f8f8;
	color: #044160;
	padding-bottom: 40px;
}
.p2pad {
	padding-top: 20px;
	padding-left: 10px;
	padding-right: 10px;
}

.p2imageCaption {
	font-size: 1.1em;
	line-height: 1.4em;
}

/*PANEL3*/
#panel-3 {text-align: center; padding-bottom: 30px;}

.scroll-bars {
	display: inline-block;
}

.scroll-bars > img {
	height: 402px;
	width: 20px;
}

.testimonial {
  margin: 0 auto;
  display: inline-block;
  margin-top: 20px;
}

.p3Text1 {
	line-height: 1.6em;
	font-size: .9em;
}

.test2 {
  display: none;
}

.test3 {
  display: none;
}

#scroll-right {
  display: inline-block;
}

.test-name {
  font-family: 'Bree Serif', serif;
  color: #014471;
  font-size: 26px;
  font-weight: bold;
  padding: 10px;
}

.test-photo {
  border: 4px dashed #92dc85;
  border-radius: 50%;
  height: 250px;
  width: 250px;
  margin: 0 auto;
}

.test-photo > img {
  border-radius: 50%;
  height: 220px;
  width: 220px;
  padding-top: 15px;
}

.p3saved {
  font-family: 'Arvo-Bold', serif;
  font-size: 1.5em;
  border: 2px dashed #22b121;
  border-radius: 10px;
  color: #22b121;
  padding: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #f4fef3;
  width: 200px;
  margin: auto;
  margin-top: 20px;
}

.btn-get-estimate {
  margin-top: 30px;
  margin-bottom: 30px;
  color: white;
  font-size: 1em;
  font-weight: bold;
  background-color: green;
  text-shadow: 1px 1px 0px rgba(100, 100, 100, 1);
  width: 200px;
  border-radius: 5px;
  padding-top: 15px;
  padding-bottom: 15px;
	letter-spacing: .75px;
  background: -moz-linear-gradient(top, #8bc24b 0%, #6bb94c 44%, #50af53 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #8bc24b 0%,#6bb94c 44%,#50af53 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #8bc24b 0%,#6bb94c 44%,#50af53 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8bc24b', endColorstr='#50af53',GradientType=0 ); /* IE6-9 */
}

/*PANEL4*/
#panel-4 {
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #f8f8f8;
	text-align: center;
}
#p4Video {
		display: inline-block;
		width: 100%;
}
.vid-benefits {
	display: inline-block;
	vertical-align: top;
	padding-left: 20px;
	padding-right: 20px;
}
.vid-title {
	margin-top: 30px;
	font-size: 1.6em;
	color: #044160;
}
.vid-bullet {
}
.p2special {
	vertical-align: top;
}

ul.check-img {
	list-style-image: url("/static/app/img/small-check.png");
	margin-left: 0;
	padding-left: 0;
}

ul.check-img > li {
	margin-top: 10px;
	margin-left: 1.7em;
	text-align: left;
}

/*PANEL5*/
#panel-5 {text-align: center; padding-bottom: 30px;}
.scroll-bars {
	display: inline-block;
}

.scroll-bars > img {
	height: 402px;
	width: 20px;
}

.onlineMech {
  margin: 0 auto;
  display: inline-block;
  margin-top: 20px;
}

.p3Text1 {
	line-height: 1.6em;
	font-size: .9em;
}

.mech2 {
  display: none;
}

.mech3 {
  display: none;
}

#scroll-right {
  display: inline-block;
}

.mech-rating {
	vertical-align: middle;

}
.mech-rating-text {
	color: gray;
	font-size: 1.5em;
}

.mech-name {
  font-family: 'Bree Serif', serif;
  color: #014471;
  font-size: 26px;
  font-weight: bold;
  padding: 10px;
}

.mech-photo {
  border: 2px solid gray;
  border-radius: 50%;
  height: 250px;
  width: 250px;
  margin: 0 auto;
  margin-top: 10px;
}

.mech-photo > img {
  border-radius: 50%;
  height: 220px;
  width: 220px;
  padding-top: 15px;
}

.btn-reveal {
  margin-top: 5px;
  margin-bottom: 5px;
  color: white;
  font-size: 1em;
  font-weight: bold;
  background-color: green;
  text-shadow: 1px 1px 0px rgba(100, 100, 100, 1);
  width: 140px;
  border-radius: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
	letter-spacing: .75px;
  background: -moz-linear-gradient(top, #8bc24b 0%, #6bb94c 44%, #50af53 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #8bc24b 0%,#6bb94c 44%,#50af53 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #8bc24b 0%,#6bb94c 44%,#50af53 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8bc24b', endColorstr='#50af53',GradientType=0 ); /* IE6-9 */
}

.btn-chat-now {
  margin-top: 5px;
  margin-bottom: 5px;
  color: white;
  font-size: 1em;
  font-weight: bold;
  background-color: green;
  text-shadow: 1px 1px 0px rgba(100, 100, 100, 1);
  width: 200px;
  border-radius: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
	letter-spacing: .75px;
  background: -moz-linear-gradient(top, #8bc24b 0%, #6bb94c 44%, #50af53 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #8bc24b 0%,#6bb94c 44%,#50af53 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #8bc24b 0%,#6bb94c 44%,#50af53 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8bc24b', endColorstr='#50af53',GradientType=0 ); /* IE6-9 */
}

/*PANEL6*/
#panel-6 {
	color: white;
	background-color: #2196f3;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
}
.statsColumn {
	display: inline-block;
	width: 100%;
}
.statName {
	font-family: "Open Sans";
	font-size:1.5em;
	letter-spacing: 1px;
}
.statNumber {
	font-size:3.5em;
}
#p6-2 {
	padding-top: 20px;
	padding-bottom: 20px;
}

/*PANEL7*/
#panel-7 {
	display: none;
	background-color: #353535;
	padding: 35px;
	color: white;
}

.desktopNavColumn {
	display: inline-block;
	width: 33%;
	text-align: center;
	vertical-align: top;
}

.desktopNavTitle {
	font-size: 2em;
	margin-bottom: 20px;
}

.desktopNavUL {
	font-size: .8em;
	line-height: 2.6em;
	font-weight: 500;
	letter-spacing: .05em;
	display: inline-block;
	text-align: left;
}

.desktopNavUL > li > a {
	padding-bottom: 2px;
	text-decoration: none;
	color: #999999;
	border-bottom-style: dotted;
	border-bottom-width: thin;
}

.desktopNavUL > li {
	color: #999999;

}


.desktopNavUL > li::before {
content: "•";
color: #999999;
}

#p7-2 {margin-left: -45px;}
#p7-3 {margin-left: -65px; margin-top: 40px;}
#p7-4 {margin-left: 20px;}

/*FOOTER (desktop only)*/
footer {
	display: none;
	height: 60px;
	color: #999999;
	background-color: #232323;
}

#foot-left {
	float:left;
	font-size: .9em;
	font-weight: 200;
	padding-top: 20px;
	padding-left: 10px;
}
#foot-right {
	float:right;
	color:white;
	padding-right: 10px;
}

/*RANDOM SHIT I USE*/
.dib {display: inline-block;}
.centerElement {text-align: center;}
.centerBlock {margin: 0 auto;}
.pad20 {padding: 20px;}
.padT20 {padding-top: 20px;}
.padB20 {padding-bottom: 20px;}
.vAlign {vertical-align: middle;}
.whiteFont {color: white;}
.goLeft {float: left;}
.goRight {float: right;}
.clear {clear: both;}
.oneThird {width: 33%;}
.textLeft {text-align: left;}
.textRight {text-align: right;}

main {
	padding-top: 52px;
	max-width: 800px;
	margin: 0 auto;
}

/*MEDIA QUERY*/
@media only screen and (min-width : 769px) {
	footer { display: block; }
	div.full #container-nav {display: none;}
	div.full main {
		padding-top: 0;
		max-width: inherit;
	}
	.panelTitle {font-size: 2.6em;}
	#tempTagline {display: none;}
	#container-p1 {padding-top: 20px;}
	#dt1 {display: inline-block;}
	#dt2 {display: inline-block; margin-left: 30px;}
	#socialGroup {float: right; margin-right: 20px;}
	#dt3 {display: block; vertical-align: top; margin-top: 0px;}
	#dt4 {display: inline-block; vertical-align: top; margin-top: 0px;}
	#taglineGroup {display: inline-block;}
	#formGroup {float: right; width: 48%; margin-top: 40px; text-align: right;}
	/* #signUpFormButtons {text-align: right; margin-right: 100px;}
	#signUpForm > .inputHalf {width: 49%;}
	#signUpForm {float: right; margin: 0px; width: 280px; margin-top: 10px; margin-right: 36px;} */
	input {height: 46px;}
	#greenButton {float: left; height: 54px; width: 245px; font-size: 1.1em;}
	#escrow {position: relative;margin-left: -60px;margin-bottom: -50px;}
	.test2 {display: inline-block;}
	.testimonial {padding-left: 20px; padding-right: 20px;}
	#mechInfomercial {height: 300px; width: 500px;}
	.testing {width: 560px; margin: 0 auto;}
	.vid-benefits {display: inline-block; margin: 0 auto;}
	.mech2 {display: inline-block;}
	.onlineMech {padding-left: 20px; padding-right: 20px;}
	.statsColumn {width: 33.33%;}
	#panel-7 {display: block;}
}

@media only screen and (min-width : 1000px) {
	#dt3 {display: inline-block;}
	#socialGroup {margin-right: 0px;}
	#dt4 {margin-right: 20px;}
	#blueButton {height: 40px; width: 140px; font-size: .8em; font-weight: 500;}
	#greyButton {height: 40px; width: 140px; font-size: .8em; font-weight: 500;}
	/* #signUpFormButtons {margin-right: 162px;}
	#signUpForm {width: 336px; margin-right: 110px;} */
	.btn-get-estimate {width: 480px; font-size: 3.2em; padding-top: 30px; padding-bottom: 30px; border-radius: 10px;}
	.p2Idgaf {font-size: 1.1em;}
	.test3 {display: inline-block;}
	.mech3 {display: inline-block;}
}

@media only screen and (min-width : 1200px) {
	#dt1, #taglineGroup {margin-left: 100px;}
	#dt4 {margin-right: 100px;}
	#taglineGroup {width: 40%}
	#stmt1 {font-size: 2vw;}
	#stmt2 {font-size: 1.2vw;}
	/* #formGroup {margin-right: 0px;}
	#signUpFormButtons {margin-right: 242px;}
	#signUpForm {margin-right: 190px;} */
	.p2pad {padding: 15px;}
	#foot-left {padding-left:220px;}
	#foot-right {padding-right: 220px;}
	.p4Video {}
	#panel-7 {padding-left: 100px; padding-right: 100px;}

}

@media only screen and (min-width : 1600px) {
	#dt1, #taglineGroup {margin-left: 200px;}
	#dt1 {margin-right: 10px;}
	#dt4 {margin-right: 200px; margin-left: 18px;}
	#taglineGroup {width: 41%}
	#stmt1 {font-size: 2.2em;}
	#stmt2 {font-size: 1.199em; padding-right: 20px;}
	/* #formGroup {width: 44%}
	#signUpFormButtons {margin-right: 362px;}
	#signUpForm {margin-right: 310px;} */
	.testimonial {padding-left: 52px; padding-right: 52px;}
	#panel-4 {padding-left: 200px; padding-right: 200px;}
	#panel-6 {padding-left: 200px; padding-right: 200px;}
	.p2Idgaf {font-size: 1.25em;}
	.p2pad {padding: 28px;}
	#panel-7 {padding-left: 200px; padding-right: 200px;}
}