* {
  top: 0;
  margin: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
}

html, body {
  height: 100%;
  font-size: 12px;
  background-color: #eeeeee;
}

body {
  height:100%;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

@font-face {
  font-family: Lato-Bold; src:url("../Fonts/Lato-Black.ttf")
}
@font-face {
  font-family: Lato-Light; src:url("../Fonts/Lato-Light.ttf")
}
@font-face {
  font-family: Lato-Medium; src:url("../Fonts/Lato-Regular.ttf")
}
@font-face {
  font-family: Lato; src:url("../Fonts/Lato-Bold.ttf");
}
@font-face {
  font-family: Icon; src:url("../Fonts/icomoon.ttf")
}
h1, h2, h3, h4, h5, h6{
  text-align: center;
  font-size: 180%;
}
h1, h2, h4{
  font-family: Lato-Bold;
}
h3 {
  font-family: Lato;
}
p, h5 {
  font-family: Lato-Light;
  font-size: 180%;
}
h1 {
  font-size: 620%;
  color: #ffffff;
  margin-bottom: 1%;
  text-shadow: 0 3px 6px rgba(0,0,0,0.5);;
}
h2 {
  font-size: 320%;
  color: #490049;
}
h4 {
  transition: 0.2s;
  color: rgba(245, 245, 245, 1);
}
h4:hover {
  transition: 0.5s;
  color: #f17141;
}
h5 {
  font-size: 150%;
}
h5 {
  transition: 0.5s;
  color: rgb(220, 220, 220);
}

a:link, a:visited{
  text-decoration: none;
  font-weight: bold;
  color: #ffffff;
}

.iconFont {
  font-family: Icon;
}

/***********************THE*HEADER******************************************/
/***********************THE*HEADER******************************************/
/***********************THE*HEADER******************************************/

.header {
  position: fixed;
  width: 100%;
  max-height: 10%;
  padding: 2% 0;
  background-color: rgba(73, 0, 73, 0.9525);
  box-shadow: 0 6px 12px rgba(0,0,0,0.8);
  z-index: 3;
  transition: 0.5s;
  color: #f0f0f0;
}

.notLand .header {
  position: absolute;
}

ul {
  list-style-type: none;
}

.headerNav {
  height: 100%;
}

.headerNavTab {
  padding: 0 2%;
  display: inline-block;
  text-align: center;
  float: right;
  top: 27.5%;
  position: relative;
}

.logo {
  height: 100%;
  position: absolute;
  left: 0;
  margin-left: 2%;
  background-image: url("../Images/syrinj_logotype.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.signUpTab {
  width: 100%;
  height: 75%;
  background-color: #F17141;
  border: 3px solid #F17141;
  border-radius: 25px;
  transition: 0.5s;
  padding: 0 5%;
  font-family: Lato-Bold;
  color: #f5f5f5;
  font-size: 180%;
}

.signUpTab:hover {
  background-color: transparent;
  color: #F17141;
  transition: 0.5s;
}

.headerProf {
  display: inline-block;
  text-align: right;
  position: absolute;
  top: 20%;
  right: 1%;
  white-space: nowrap;
  max-width: 20%;
}

.headerProfMenu {
  background-color: #2f222f;
  height: auto;
  width: 50%;
  min-width: 160px;
  padding: 0.5% 0 0 0;
  display: inline-block;
  position: absolute;
  box-shadow: 0px 5px 5px 0px rgba(50,50,50,0.5);
  top: 120%;
  right: 2.5%;
}

.headerProfMenu:before {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  right: 33%;
  bottom: 100%;
  border-bottom: 15px solid #2f222f;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

.headerProfMenu li {
  width: 92%;
  max-width: 100%;
  padding: 4%;
  text-align: center;
}

.headerProf p {
  font-family: Lato;
  max-width: 75%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  display: inline-block;
  color: #ffffff;
}

.headerProfPic {
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  background-color: white;
  margin: 0 1%;
}

.signPop {
  position: fixed;
  background-color: #f5f5f5;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  min-width: 300px;
  padding: 30px 15px;
  width: 40%;
  box-shadow: 0 6px 12px rgba(0,0,0,0.8);
  z-index: 8;
}

/***********************THE*SIGN*UP*LOG*IN**********************************/
/***********************THE*SIGN*UP*LOG*IN**********************************/
/***********************THE*SIGN*UP*LOG*IN**********************************/

#smallSect {
  width: 90%;
  max-width: 600px;
  margin: 25% auto 5%;
  padding: 1% 5% 2.5% 5%;
}

.lightBox {
  position: fixed;
  z-index: 5;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: black;
  background: rgba(0,0,0,0.2);
}

.zipImg {
  padding: 20%;
  margin: 0 auto;
  background-image: url("../Images/zipsearch.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.nevermind {
  font-family: Icon;
  width: 30px;
  height: 30px;
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 240%;
  color: #490049;
}

.note {
  background-color: rgba(255,255,0,0.5);
  padding: 8px;
  width: 90%;
  text-align: left;
  margin-left: 5%;
}

.note:before {
  font-family: Icon;
  content: "\e901  ";
}

.signUpWrap, .signInWrap {
  margin: 2% auto;
  width: 100%;
  position: relative;
}

.signUp {
  height: 10%;
  width: 50%;
  border: 3px solid #490049;
  margin: 0 25%;
  border-radius: 25px;
  transition: 0.5s;
  font-family: Lato-Bold;
  color: #f17141;
  font-size: 180%;
  background-color: #490049;
}

.signUp:hover {
  background-color: #f17141;
  transition: 0.5s;
  color: #490049;
}

.signPop .signUp, .sect .signUp {
  color: white;
}

.signPop .signUp:hover, .sect .signUp:hover  {
  color: #490049;
  background-color: white;
}

.signUpInput#email,.signUpInput#Email, #referee {
  width: 75%;
  padding: 3%;
  margin: 0 9.5% 5% 9.5%;
}

.signUpWrap .signUpInput {
  display: inline-block;
  margin: 0 0 0 7.5%;
  width: 75%;
  padding: 2%;
}

.signInWrap .signInInput {
  display: block;
  margin: 0 auto;
  width: 70%;
  padding: 2% 5% 2% 2%;
}

#referee {
  margin-bottom: 0;
}

#zipcode, #Zipcode, #ZipCode {
  width: 80%;
  margin: 5%;
  text-align: center;
}

#continuebtn {
  width: 90%;
  margin: 0 5%;
}

#smallSect .signUpLast {
  font-size: 130%;
  text-align: center;
  padding: 0;
}

.signUpLast a, .sect p a {
  color: #490049;
}

input[type=text], input[type=number], input[type=password], input[type=email] {
  font-family: Lato;
  border: 1px solid #dddddd;
  margin: 0;
  font-size: 180%;
}

input[type=text]:focus, input[type=number]:focus, input[type=password]:focus, textarea:focus, input[type=email]:focus  {
  outline: none;
  color: #111111;
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#refereeStatus, #emailStatus, #passStatus {
  top: 65.5%;
  right: 6%;
  position: absolute;
}

#emailStatus, #passStatus {
  top: 25%;
  right: 23.75%;
}

.signBackground {
  background-image: url("../Images/halfground_signup.svg");
}

.signPic {
  margin: 0 42.5%;
  vertical-align: middle;
  display: inline-block;
  width: 15%;
}

#svgProgress {
  display: block;
  margin: 0 auto;
}

#smallSect p {
  padding-bottom: 2.5%;
}

#signUpWrapWrap, #logInWrapWrap {
  padding-top: 3.5%;
}

#smallSect .signToggle {
  color: black;
  font-family: Lato;
  padding: 2.5% 0 0 0;
}

.hide {
  display: none;
}

/***********************THE*LANDING *PAGE***********************************/
/***********************THE*LANDING *PAGE***********************************/
/***********************THE*LANDING *PAGE***********************************/

.heroLogomark {
  width: 15%;
  max-width: 175px;
  display: block;
  margin: 0 auto;
}

.tagline {
  color: black;
}

.CTA {
  width: 20%;
  height: 10%;
  position: relative;
  left: 40%;
}

#Zipcode {
  width: 45%;
  text-align: left;
  border-style: none;
  border-radius: 25px;
  height: 100%;
  padding: 0 27.5%;
  margin: 0;
  box-shadow: 0 3px 3px rgba(0,0,0,0.8);
}

.CTASearch {
  width: 100%;
  height: 100%;
  background-color: #3eb861;
  border-style: none;
  border-radius: 25px;
  padding: 0;
  font-family: Lato-BOld;
  color: #f5f5f5;
  font-size: 225%;
  position: absolute;
  top: 0;
  right: 0;
  transition: 0.25s ease;
}

.CTASearch:hover {
  background-color: #44cc6c;
  transition: 0.25s ease;
}

.shrink {
  width: 25%;
}

.wrapper{
  min-height: 100%;
  width: 100%;
}

.landWrap {
  height: 100%;
}

.section {
  width: 80%;
  padding-top: 2%;
  margin: 0 auto;
}

.content {
  background-color: #f5f5f5;
}

.parrallax {
  width: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

#par1 {
  background-image: url("../Images/bike.jpg");
  background-position: center;
  height: 100%;
  min-height: 520px;
  max-height: 768px;
}

#par1 .section {
  height: 100%;
}

#par1 h2 {
  color: white;
  text-shadow: 0 3px 6px rgba(0,0,0,0.5);
}

.work {
  width: 30%;
  padding-bottom: 33%;
  display: inline-block;
  margin: 5% 1% 5% 2%;
}

.workTitle {
  margin-bottom: 2%;
}

.workWrap {
	perspective: 1000px;
	transform-origin: center;
	position: relative;
}

/*.workWrap:hover .flipper, .workWrap.hover .flipper {*/
/*	transform: rotateY(180deg);*/
/*}*/

.workWrap, .workFront, .workBack {
  width: 100%;
	height: auto;
}

.flipper {
	transition: 1s;
	transform-style: preserve-3d;
	position: relative;
}

.workFront, .workBack {
	backface-visibility: hidden;
	top: 0;
	left: 0;
	position: absolute;
  box-shadow: 0 3px 6px rgba(0,0,0,0.5);
	border-radius: 50%;
}

.workFront img, .workBack Img {
  margin-bottom: -4.5px;
}

.workFront {
	z-index: 2;
	transform: rotateY(0deg);
}

.workBack {
	transform: rotateY(180deg);
	text-align: center;
}

#par2 {
  background-color: #F17141;
}

#par2 h2 {
  color: #490049;
}

#par2 h3 {
  text-align: left;
}

#par2 p {
  color: #f5f5f5;
  font-family: Lato-Medium;
}

#par2 .section {
  padding: 2% 0;
}

.benefitWrap {
  width: 27%;
  padding: 3.5% 2.5%;
  display: inline-block;
  color: #f5f5f5;
  margin: 2% 0.5%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.5);
}

.benefitWrap:nth-child(1) {
  background-color: #3eb8b6;
}

.benefitWrap:nth-child(2) {
  background-color: #3eb861;
}

.benefitWrap:nth-child(3) {
  background-color: #edcf00;
}

.benefitWrap:nth-child(4) {
  background-color: #3eb861;
}

.benefitWrap:nth-child(5) {
  background-color: #c14749;
}

.benefitWrap:nth-child(6) {
  background-color: #3eb8b6;
}

.benefitPic {
  width: 30%;
  float: left;
}

.benefitTitle {
  width: 100%;
}

.benefit {
  margin-left: 32%
}

#con2 {
  background-color: #490049;
}

#con2 h2 {
  color: rgb(245,245,245);
}

#con2 h3, #con2 p {
  color: #2f222f;
}

#con2 .section {
  background-image: url("../Images/syrinj_review.svg");
  background-repeat: no-repeat;
  background-position: right bottom;
  padding: 2% 0;
}

.review {
  width: 48%;
  display: inline-block;
  padding: 0 2%;
}

.reviewCard {
  background-color: #f5f5f5;
  padding: 5%;
  margin-top: 5%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.5);
}

#con3 {
  padding: 5% 0;
  background-color: #f17141;
  color: white;
}

#con3 p {
  text-align: center;
}

#con3 .section {
  padding-top: 0;
  width: 50%;
}

/***********************THE*DASHBOARD***************************************/
/***********************THE*DASHBOARD***************************************/
/***********************THE*DASHBOARD***************************************/

.dashNavWrap .dashNavCurrent, .faqNav .faqNavCurrent {
  color: #f17141;
  background-color: rgba(255,255,255,0.1);
}

.dash > div {
  display: none;
}

div .show {
  display: block;
  padding-left: 15%;
}

.dash h2 {
  margin: 0 0 2% 4%;
  text-align: left;
}

.dash h3 {
  font-size: 250%;
}

.dash p:not .listing {
  text-align: center;
}

.referWrap, .orderBlank, .listingBlank {
  width: 90%;
  background-color: #e5e5e5;
  padding: 15px;
  margin: 2% auto;
}

/**************************THE*REFERAL*SECTION******************************/
.referImg, .searchImg {
  width: 1%;
  padding: 15%;
  margin: 2% auto;
  background-image: url("../Images/syrinj_refer.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#smallSect .referImg{
  padding: 20%;
}

.referalCode {
  margin: 2% auto;
  text-align: center;
}

.referalCode li{
  margin: 2% auto;
  text-align: center;
  display: inline-block;
  padding: 2%;
}

.referalCode a {
  color: #490049;
}

.referalCode input[type=text] {
  margin: 1% auto;
  border-radius: 25px;
  text-align: center;
  font-size: 240%;
  width: 100%;
  max-width: 360px;
}

.referBackground {
  background-image: url("../Images/halfground_refer.svg");
}

/**************************THE*Listing*SECTION*******************************/
.newListing {
  width: 18%;
  padding: 2%;
  color: white;
  text-align: center;
  background-color: #490049;
  box-shadow: 0px 1px 5px 0px rgba(51,51,51,1);
  display: inline-block;
  margin: 2% 4%;
}

.newListing:hover {
  background-color: #612261;
}

.sortListing {
  margin: 3%;
  background-color: #e5e5e5;
  padding: 1%;
  box-shadow: 0px 1px 5px 0px rgba(100,100,100,1);
  font-family: Lato;
  font-size: 140%;
  display: inline-block;
  float: right;
}

.listingWrap {
  margin: 2% 0;
}

.listing {
  width: 90%;
  background-color: #e5e5e5;
  border: 1px solid #dddddd;
  padding: 10px;
  box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.3);
  margin: 2% auto;
}

.listingPic {
  display: inline-block;
  left: 0;
  vertical-align: middle;
  padding: 1.5%;
  background-repeat: no-repeat;
}

.listingRate {
  text-align: center;
  margin-top: 100%;
}

.listingWord {
  display: inline-block;
  height: auto;
  width: 75%;
  margin-left: 2%;
  vertical-align: top;
  position: relative;
}

.listing h3 {
  text-align: center;
  vertical-align: top;
  display: inline-block;
}

.listing h3.iconFont {
  position: absolute;
  right: 0;
  top: 0;
}

.listingDesc {
  overflow: hidden;
  margin-left: 3%;
  height: 108px;
  position: relative;
}

.listingDesc:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40%;
  height: 28px;
  background: linear-gradient(to right, rgba(229, 229, 229, 0), rgba(229, 229, 229, 1) 75%);
}

/**************************THE*SEARCH*SECTION********************************/
.orderBlank h2 {
  text-align: center;
}

#orders_ .orderIncent {
  height: 10%;
  border: 3px solid #f17141;
  border-radius: 25px;
  transition: 0.5s;
  font-family: Lato-Bold;
  color: #f17141;
  font-size: 180%;
  background-color: #f17141;
  width: 40%;
  text-align: center;
  margin: 5% auto 2%;
  color: white;
  padding: 0.5%;
}

#orders_ .orderIncent:hover {
  background-color: transparent;
  color: #f17141;
}

/**************************THE*SYRINGE*EDITOR*******************************/
/**************************THE*SYRINGE*EDITOR*******************************/
/**************************THE*SYRINGE*EDITOR*******************************/
.editBackground {
  background-image: url("../Images/halfground_syringeedit.svg");
}

.editTextWrap {
  vertical-align: middle;
  display: inline-block;
  width: 40%;
  padding: 2.5%;
  margin-right: 5%;
}

.editTextWrap h2:first-letter {
  color: #f17141;
}

input[type=text].editNameInput, input[type=email].editNameInput {
  width: 40%;
  vertical-align: middle;
  font-size: 260%;
  text-align: center;
  padding: 2% 2.5% 1%;
  border-bottom: 5px solid #f17141;
}

.editPhotoPrev {
  padding: 10%;
  margin-right: 1%;
  display: inline-block;
  vertical-align: bottom;
  background-image: url("../Images/uploadPhoto.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

input[type=file]#editPhotoInput {
  display: inline-block;
  vertical-align: top;
  background-color: white;
}

.editDescInput {
  font-family: Lato-Light;
  border-style: none;
  margin-top: 2%;
  font-size: 180%;
  padding: 1% 2%;
  width: 44%;
  height: 150px;
  vertical-align: bottom;
  resize: none;
  border-bottom: 5px solid #f17141;
}

#editDescInputCount {
  text-align: right;
}

#editSaveButton {
  width: 20%;
  display: inline-block;
  margin: 0 auto;
  border-radius: 25px;
  border: 3px solid #f17141;
  font-family: Icon;
  color: #ffffff;
  font-size: 180%;
  background-color: #f17141;
  padding: 1%;
  margin: 2% 40% 0;
  transition: 0.5s;
}

#editSaveButton:hover {
  transition: 0.5s;
  background-color: white;
  color: #f17141;
}

#editSaveButton:disabled {
  color: #e5e5e5;
  border: 3px solid #e5e5e5;
  background-color: #f5f5f5;
}

/**************************THE*Profile*PAGES********************************/
/**************************THE*Profile*PAGES********************************/
/**************************THE*Profile*PAGES********************************/

.profileSide {
  background-color: #2f222f;
  height: auto;
  min-height: 100%;
  width: 19%;
  padding: 0 1% 0 0;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 5px 0px 5px 0px rgba(50,50,50,0.5);
}

.profileWrap {
  margin-left: 15%;
}

.profileWrap div {
  padding-bottom: 5%;
}

.profileWrap h2, .profileWrap p {
  display: inline-block;
  width: 40%;
  vertical-align: top;
}

.profileWrap h2 {
  text-align: right;
  margin-right: 5%;
}

.profileWrap div p {
  text-align: left;
  width: 45%;
}

.profileWrap p.note {
  width: 40%;
  margin-right: 0;
}

.profileWrap input[type=text].editNameInput,.profileWrap input[type=email].editNameInput  {
  width: 45%;
  font-size: 180%;
  position: relative;
  margin-left: 2%;
}

input[type=checkbox] {
  visibility: hidden;
  float: left;
}

#check {
  height: 24px;
  width: 24px;
  background-color: white;
  color: #ffffff;
  border: 1px solid #f17141;
  display: inline-block;
  font-size: 20px;
  text-align: center;
  padding: 0;
  transition: 0.5s;
  font-family: Icon;
}

input[type=checkbox]:checked ~ #check {
  transition: 0.5s;
	background-color: #f17141;
}

/**************************THE*FOOTER*PAGES*ASSESTS*************************/
/**************************THE*FOOTER*PAGES*ASSESTS*************************/
/**************************THE*FOOTER*PAGES*ASSESTS*************************/
.buffer {
  width: 100%;
  height: 20%;
  background-color: #f5f5f5;
  box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.5);
  position: relative;
  z-index: 2;
}

.halfGround {
  max-height: 50%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: repeat;
}

.sect {
  margin: 25% auto 5%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.5);
  width: 85%;
  max-width: 1028px;
  background-color: #f5f5f5;
  padding: 2.5% 5% 5% 5%;
  position: relative;
}

.sect p, .dash p {
  /*margin-top: 1%;*/
  text-align: center;
}

.listingWrap p, .editTextWrap p {
  text-align: left;
}

/**************************THE*FAQ*PAGE*************************************/
/**************************THE*FAQ*PAGE*************************************/
/**************************THE*FAQ*PAGE*************************************/

.faqBackground {
  background-image: url("../Images/halfground_faq.svg");
}

.faq a {
  color: #490049;
}

.faq p {
  text-align: left;
}

.faq h3 {
  color: #490049;
}

.sideBarWrap {
  position: fixed;
  top: initial;
  right: 24px;
  bottom: 90px;
}

.sideBarButton {
  background-color: #2f222f;
  height: 56px;
  width: 56px;
  right: 0;
  position: absolute;
  border-radius: 50%;
  z-index: 2;
  background-image: url("../Images/wex.svg");
  background-repeat: no-repeat;
  background-position: center;}

.sideBarButton.shadow:hover {
  background-color: #384138;
}

.shadow {
  box-shadow: 0px 3px 6px rgba(0,0,0,0.5);
  background-image: url("../Images/list.svg");
}

.sideBarButton:hover {
  background-color: #2f222f;
}

.sideBar {
  background-color: #2f222f;
  width: 200px;
  height: auto;
  position: absolute;
  right: 10%;
  top: -350px;
  padding-bottom: 60px;
  box-shadow: 0px 3px 6px rgba(0,0,0,0.5);
}

.faqNav li, .dashNav li, .profileSide li {
  width: 96%;
  padding: 6% 0 6% 4%;
}

.faqNav .faqNavLast, .dashNavLast, .navLast {
  padding-bottom: none;
}

.faqNav li:hover, .dashNav li:hover, .profileSide li:hover, .headerProfMenu li:hover, .headerNavMenu li:hover {
  background-color: rgba(255,255,255,0.2);
}

.faqNav {
  display: block;
  padding: 0;
}

.faqNav a, .dashNav a, .profileSide a, .headerProfMenu a {
  font-family: Lato;
  font-size: 180%;
}

.faq {
  width: 90%;
  margin: 0 auto;
  background-color: #e5e5e5;
  border: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  padding: 15px;
  transition: 0.5s;
}

.faqWrap {
  margin: 2%;
}

.faqExpand {
  box-shadow: 0 3px 6px rgba(0,0,0,0.5);
  margin: 2% auto;
  transition: 0.5s;
}

.faqCollapse {
  display: none;
  transition: 0.5s;
}

.collapsed {
  display: block;
  transition: 0.5s;
}
/**************************THE*ABOUT*PAGE***********************************/
/**************************THE*ABOUT*PAGE***********************************/
/**************************THE*ABOUT*PAGE***********************************/

.aboutBackground {
  background-image: url("../Images/halfground_about.svg");
}

.aboutImg {
  background-image: url("../Images/syrinj_logomark.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: 15%;
}

#medSect {
  width: 80%;
  max-width: 1028px;
  margin: 25% auto 5%;
  padding: 5% 10%;
}

.aboutH2, .aboutH3 {
  text-align: center;
}

/**************************THE*FOOTER***************************************/
/**************************THE*FOOTER***************************************/
/**************************THE*FOOTER***************************************/

#footer {
  width: 100%;
  background-color: #2f222f;
  padding-bottom: 2%;
}

#footer div {
  width: 100%;
  margin: 0 auto;
}

#footer .line {
  width: 30%;
  height: 1px;
  background-color: white;
  margin-top: 1%;
}

.footerSocial {
  font-family: Icon;
  font-size: 280%;
}

#footer div ul {
  margin: 0 auto;
  text-align: center;
  padding: 0;
}

#footer div li {
  padding: 2%;
  display: inline-block;
  text-align: center;
}

#footer.smallFooter, .push {
  height: 50px;
  padding-bottom: 0;
}

#footer.tinyFooter {
  position: absolute;
  top: 89%;
}

#footer.tinyFooter h5,#footer.tinyFooter a {
  font-size: 110%;
}

.smallFooter .section {
  padding-top: 1%;
  margin-bottom: 0;
}
#footer.smallFooter div {
  margin-bottom: 0;
}

#d1 {
    background-color: #F5DD71;
}
#d2 {
    background-color: #5bcd15;
}
#d3 {
    background-color: #A4F3DA;
}

/**************************SMALL*SCREEN*************************************/
@media (min-width: 400px) {
  #con1 .section, #par2 .section {
    width: 80%;
  }
}
@media(max-width:500px) {
  #con2 .section {
    width: 100%;
    background-position: center bottom;
  }
}
@media (min-width: 500px) {
  #con1 .section {
    width: 70%;
  }
  #con2 .section {
    background-position: right bottom;
  }
  #smallSect, #medSect, .sect {
    margin-top: 15%;
  }
  .aboutImg {
    padding: 12%;
    float: left;
  }
  .aboutH2, .aboutH3 {
    text-align: left;
    margin-left: 28%;
  }
  #smallSect {
    width: 80%;
  }
  #signInInput {
    width: 55%;
  }
  #ZipCode, #zipcode {
    padding: 2%;
    width: 61%;
    margin: 5% 17.5%;
  }
  #continuebtn {
    width: 65%;
    margin: 0 17.5%;
  }
}
@media (max-width: 600px) {
  .headerNavMenuBtn {
    font-family: Icon;
    font-size: 200%;
    display: inline-block;
    position: absolute;
    padding-top: 3%;
    padding-left: 2%;
    width: 10%;
    height: 80%;
  }
  .headerNavMenuBckBtn {
    font-family: Icon;
    font-size: 200%;
    position: fixed;
    height: 10%;
    width: 10%;
    color: #f5f5f5;
    padding: 19px 0 0 2%;
    z-index: 9;
  }
  .headerNavMenu {
    background-color: #2f222f;
    height: 100%;
    width: 80%;
    min-width: 160px;
    max-width: 256px;
    padding: 20% 0 0 0;
    position: fixed;
    box-shadow: 6px 0 12px rgba(0,0,0,0.8);
    left: -100%;
    transition: 0.2s;
    overflow: scroll;
    z-index: 6;
  }
  .slide {
    left: 0% ;
    transition: 0.2s ease;
  }
  .headerNavMenu li {
    width: 85%;
    max-width: 100%;
    padding: 5% 0 5% 15%;
  }
  .headerNavMenu li h4 {
    text-align: left;
  }
  .logo {
    display: none;
  }
  .headerNav a:nth-child(2), .headerNav a:nth-child(3) {
    display: none;
  }
  .header .headerNav a:first-child li:first-child {
    margin-right: 5%;
  }
  .CTA {
    width: 80%;
    left: 10%;
  }
  .work {
    width: 100%;
    margin: 5% 0 80% 0;
  }
  .benefitWrap {
    width: 95%;
  }
  .review {
    width: 72.5%;
    padding: 0 5%;
  }
  .reviewCard {
    margin: 5% 0;
  }
  #footer div {
    width: 95%;
    margin: 0 auto 3%;
  }
}
/**************************MEDIUM*SCREEN************************************/
@media (min-width: 599px) {
  .CTA {
    width: 50%;
    left: 25%;
  }
  #con1 .section, #par2 .section {
    width: 90%;
  }
  .work {
    width: 31.9%;
    margin: 5% 0.5%;
  }
  .benefitWrap {
    width: 43.7%;
  }
  .review {
    width: 60%;
  }
  .headerNavMenuBtn, .headerNavMenu {
    display: none;
  }
  #smallSect {
    width: 70%;
  }
  .signInWrap .signInInput {
    width: 55%;
  }
  .signUpInput#email,.signUpInput#Email, #referee {
    margin: 0 19.5% 3% 19.5%;
    padding: 3%;
    width: 55%;
  }
  #refereeStatus {
    top: 60.5%;
    right: 20.5%;
  }
}
@media (max-width:789px) {
  .logo {
    width: 15%;
  }
  #footer div {
    margin: 0 auto 1%;
  }
}
/**************************LARGE*SCREEN*************************************/
@media (min-width: 789px) {
  .logo {
    width: 10%;
    margin-left: 0.5%;
  }
  .header {
    padding: 1% 0;
  }
  .CTA {
    width: 30%;
    left: 35%;
  }
  #smallSect {
    width: 60%;
    margin-top: 7.5%;
  }
  #medSect, .sect {
    width: 70%;
    margin-top: 7.5%;
  }
  .sideBarWrap {
    right: 12%;
  }
  .signInWrap .signInInput {
    width: 47%;
  }
  .signUp {
    width: 40%;
    margin: 0 30%;
  }
  #Zipcode {
    padding: 0 27.5%;
    width: 45%;
    margin: 0;
  }
  #zipcode, #ZipCode {
    padding: 2%;
    width: 30%;
    margin: 0 0 0 16.5%;
  }
  #continuebtn {
    width: 30%;
    margin: 2.5% 16.5% 0 2%;
  }
  .signUpInput#email,.signUpInput#Email, #referee {
    width: 52%;
    margin: 0;
  }
  #referee {
    width: 35%;
  }
  #refereeStatus {
    top: 25.5%;
    right: 2.5%;
  }
}

@media (max-width:900px) {
  .section {
    width: 90%;
  }
}
@media (min-width:900px) {
  .benefitWrap{
    width: 27%;
  }
  .sideBarWrap {
    right: 16%;
  }
}

@media(min-width:1330px) {
  .signUpWrap .signUpInput#email, signUpWrap .signUpInput#Email {
    margin: 0 0 0 7.5%;
    width: 50%;
    padding: 2%;
  }
  #referee {
    margin: 0 0 0 2%;
    width: 23%;
    padding-right: 5%;
  }
  #refereeStatus {
    top: 25.5%;
    right: 6%;
  }
}

@media(max-width:1024px) {
  .signPop {
    width: 50%;
  }
  .headerNav a:first-child li:first-child {
    margin-right: 2%;
  }
  #con3 .section {
    width: 80%;
  }
}
@media(min-width:1024px) {
  .work {
    width: 30%;
    margin: 5% 1% 5% 2%;;
  }
  .review {
    width: 48%;
  }
  #smallSect {
    width: 52%;
  }
}

@media(min-width:1330px) {
  .signUpWrap .signUpInput#email,.signUpWrap .signUpInput#Email {
  margin: 0 0 0 7.5%;
  width: 50%;
  padding: 2%;
  }
  #referee {
  margin: 0 0 0 2%;
  width: 23%;
  padding-right: 5%;
  }
}



@media (max-width:533px) {
  h1 {
    font-size: 480%
  }
  h2 {
    font-size: 250%;
  }
  .heroLogomark {
    width: 25%;
    max-width: 100px;
  }
}
@media (min-width: 534px) {
  h1 {
    font-size: 520%
  }
  h2 {
    font-size: 280%;
  }
}
@media (min-width:660px) and (min-height: 651px) {
  h1 {
    font-size: 620%
  }
  h2 {
    font-size: 320%;
  }
}
@media (min-width:789px) and (max-height: 650px) {
  h1 {
    font-size: 620%
  }
  h2 {
    font-size: 320%;
  }
}


@media (max-width: 789px) and (max-height: 595px) {
  .tagline {
    margin-top: 50px;
  }
  .CTA {
    margin-top: 50px;
  }
}
@media (max-width: 789px) and (min-height: 596px) {
  .tagline {
    margin-top: 100px;
  }
  .CTA {
    margin-top: 100px;
  }
}
@media (max-width: 789px) and (min-height: 788px) {
  .tagline {
    margin-top: 150px;
  }
  .CTA {
    margin-top: 125px;
  }
}


@media (min-width: 790px) and (max-height: 595px){
  .tagline {
    margin-top: 70px;
  }
  .CTA {
    margin-top: 50px;
  }
}
@media (min-width: 790px) and (min-height: 596px){
  .tagline {
    margin-top: 120px;
  }
  .CTA {
    margin-top: 100px;
  }
}
@media (min-width: 790px) and (min-height: 788px) {
  .tagline {
    margin-top: 170px;
  }
  .CTA {
    margin-top: 150px;
  }
}


@media only screen and (min-device-width : 766px) and (max-device-width : 768px)  {
  html {
    background: url('../Images/bike.jpg') no-repeat top center fixed;
    background-size: cover;
    height: 100%;
    overflow: hidden;
  }

  body {
    height:100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
  }
}