/*!
 * Clean Blog v1.0.0 (http://startbootstrap.com)
 * Copyright 2014 Start Bootstrap
 * Licensed under Apache 2.0 (https://github.com/IronSummitMedia/startbootstrap/blob/gh-pages/LICENSE)
 */

body {
  /*font-family: 'Lora', 'Times New Roman', serif;*/
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 20px;
  color: #404040;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 800;
}

blockquote {
  color: #808080;
  font-style: italic;
}
hr.small {
  max-width: 100px;
  margin: 15px auto;
  border-width: 4px;
  border-color: white;
}
.navbar-custom {
  position: absolute;
  /*top: 0;*/
  left: 0;
  width: 100%;
  z-index: 999999999;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.navbar-custom .navbar-brand {
  font-weight: 800;
  width:180px !important;
}
.navbar-custom .nav li a {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
}

.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-top: -7px;}
.navbar-default .navbar-collapse,.navbar-default .navbar-form{  margin:0;}
@media only screen and (min-width: 768px) {
  .navbar-custom {
	background-color: rgba(0, 0, 0, 0);
    border-bottom: 1px solid transparent;
  }
  
  
  .navbar-custom .navbar-brand {
    color: white;
    padding: 20px;
  }
  .navbar-custom .navbar-brand:hover,
  .navbar-custom .navbar-brand:focus {
    color: rgba(255, 255, 255, 0.8);
  }
  .navbar-custom .nav li a {
    color: white;
    padding: 15px 35px;
  }
  .navbar-custom .nav li a:hover,
  .navbar-custom .nav li a:focus {
    color: rgba(255, 255, 255, 0.8);
  }
  .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-top: 0;}
  .navbar-default .navbar-collapse,.navbar-default .navbar-form{padding:10px 0;}
}
@media only screen and (min-width: 1170px) {
  .navbar-custom {
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    transition: background-color 0.3s;
	background-color: rgba(0, 0, 0, 0.2);
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .navbar-custom.is-fixed {
    /* when the user scrolls down, we hide the header right above the viewport */
    position: fixed;
    top: -75px;
	background-color: rgba(0, 0, 0, 0.4);
   /* background-color: rgba(0, 0, 0, 0.4);
    /*border-bottom: 1px solid #f2f2f2;*/
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
  }
  
  .navbar-custom.navbar-pricing {
	background-color: rgba(0, 0, 0, 0.4);
  }
  .navbar-pricing {
	background-color: rgba(0, 0, 0, 0.4);
  }
  .navbar-custom.is-fixed .navbar-brand {
    color: #fff;
  }
  .navbar-custom.is-fixed .navbar-brand:hover,
  .navbar-custom.is-fixed .navbar-brand:focus {
    color: #146CAE;
  }
  .navbar-custom.is-fixed .nav li a {
    color: #fff;
  }
  .navbar-custom.is-fixed .nav li a:hover,
  .navbar-custom.is-fixed .nav li a:focus {
    color: #146CAE;
  }
  .navbar-custom.is-visible {
    /* if the user changes the scrolling direction, we show the header */
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

footer {
  padding: 60px 0 20px;
  background:#28343e;
  color:#fff;
}
footer .list-inline {
  margin: 0;
  padding: 0;
}
footer .copyright {
  font-size: 14px;
  text-align: center;
  margin-top:35px;
  margin-bottom: 0;color:#fff;
}

footer .footitle { font-size:22px; line-height:23px;  margin-bottom:10px; min-height:30px; font-weight:700;}
footer .foocfm img { margin-top:15px; width:60%; display:block;}
footer .foosubtitle a{ font-size:16px; font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#fff;}
footer .foosubtitle a:hover{ color:#4dc4d3; text-decoration:none;}
footer .foosubtitle ul { margin-left:-40px; list-style:none;}
footer .foosubtitle ul li{margin-bottom:5px;}
footer .foosubtitle ul li i{ padding-right:3px;}
footer .foosubtitle ul.last { margin-left:-40px; list-style:none; font-size:16px; font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#fff;}
footer .foosubtitle ul.last li{margin-bottom:5px;}
footer .foosubtitle ul.last li i{ padding-right:3px; color:#28343e;}
footer .foocover { text-align:center; min-height:auto !important; margin-bottom:50px !important;}


.btn {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 0;
  padding: 15px 25px;
}
.btn-lg {
  font-size: 16px;
  padding: 25px 35px;
}
.btn-default:hover,
.btn-default:focus {
  background-color: #146CAE;
  border: 1px solid #146CAE;
  color: white;
}

::-moz-selection {
  color: white;
  text-shadow: none;
  background: #146CAE;
}
::selection {
  color: white;
  text-shadow: none;
  background: #146CAE;
}
img::selection {
  color: white;
  background: transparent;
}
img::-moz-selection {
  color: white;
  background: transparent;
}
body {
  webkit-tap-highlight-color: #146CAE;
}


.homepage-hero-module {
  border-right: none;
  border-left: none;
  position: relative;
  /*margin-top:-100px;*/
  width:100%;
  background:url(../images/vidposter.jpg) no-repeat center top;
}
.no-video .video-container video,
.touch .video-container video {
  display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
  display: block !important;
}
.video-container {
  position: relative;
  bottom: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  min-width: 100%;
  overflow: hidden;
  background: transparent;
  
}
.video-container .poster img {
  width: 100%;
  bottom: 0;
  position: absolute;
  
}
.video-container .filter {
  z-index: 22;
  position: absolute;
 	background:rgba(0,0,0,0.5);
  /*background:url(../images/pattern.png) repeat;*/
  width: 100%;
}
.video-container .title-container {
  z-index: 1000;
  position: absolute;
  top: 20%;
  width: 100%;
  text-align: center;
  color: #fff;
}
.title-container .headline h1{ font-size:55px; text-shadow:1px 2px 3px #000; margin-bottom:20px;
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;}
.video-container .description {
  font-size: 20px;
  width: 90%;
  margin: 0 auto;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-shadow:1px 1px 3px #000;
}
.video-container .link {
  position: absolute;
  bottom: 3em;
  width: 100%;
  text-align: center;
  z-index: 1001;
  font-size: 2em;
  color: #fff;
}
.video-container .link a {
  color: #fff;
}
.video-container video {
  position: absolute;
  z-index: 0;
  bottom: 0;
}
.video-container video.fillWidth {
  width: 100%;
  
}


@media only screen and (min-width: 768px) {
.homepage-hero-module {
  border-right: none;
  border-left: none;
  position: relative;
  /*margin-top:-100px;*/
  width:100%;
}
.no-video .video-container video,
.touch .video-container video {
  display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
  display: block !important;
}
.video-container {
  position: relative;
  bottom: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: transparent;
}
.video-container .poster img {
  width: 100%;
  bottom: 0;
  position: absolute;
}
.video-container .filter {
  z-index: 22;
  position: absolute;
background:rgba(0,0,0,0.7);
  width: 100%;
}
.video-container .title-container {
  z-index: 1000;
  position: absolute;
  top: 28%;
  width: 100%;
  text-align: center;
  color: #fff;
}
.title-container .headline h1{ font-size:55px; text-shadow:1px 2px 3px #000; margin-bottom:20px;
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;}
.video-container .description {
  font-size: 20px;
  width: 45%;
  margin: 0 auto;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-shadow:1px 1px 3px #000;
}
.video-container .link {
  position: absolute;
  bottom: 3em;
  width: 100%;
  text-align: center;
  z-index: 1001;
  font-size: 2em;
  color: #fff;
}
.video-container .link a {
  color: #fff;
}
.video-container video {
  position: absolute;
  z-index: 0;
  bottom: 0;
  min-width: 100% !important;
  width:100% !important;
}
.video-container video.fillWidth {
  width: 100%;
  min-width: 100% !important;
  background:url(../images/vidposter.jpg) no-repeat center top;
}
}


#top_bar {
	float:left;
	width:100%;
	height:760px;
	background:#28343e;
	display:none;
	padding:2%;
	color:#fff;
}

#top_bar h2 { font-size:20px;}
#top_bar p { font-size:16px;}
#top_bar img { width:35%;}
#top_bar .learn-more { margin-top:30px; font-size:13px;}
#top_bar .cover { padding:5px 25px;}
#close_top_bar {
	font-size:30px;
	color:#fff;
	cursor:pointer;
}
#close_top_bar:hover{ text-decoration:none;}
#show_top_bar {padding:10px 15px;background:rgba(255,255,255,0.35); text-transform:capitalize; margin-top:20px; color:#fff; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:400; font-size:16px;}
.top-bar-content { padding:3% 0 0 0;}
.navbar-right { text-align:center;}

@media only screen and (min-width: 768px) {
	#top_bar {
	float:left;
	width:100%;
	height:660px;
	background:#28343e;
	display:none;
	padding:2%;
	color:#fff;
}
#top_bar img { width:60%;}
#top_bar h2 { font-size:25px;}
#top_bar p { font-size:16px;}
#top_bar .learn-more { margin-top:50px; font-size:14px;}
.navbar-right { text-align:left;}
}



.how-hamele-help { background:#28343e; width:100%; padding:30px; /*margin-top:-100px;*/ position:relative; z-index:33;}
.how-hamele-help .content { font-size:18px; margin-top:7%; color:#fff;}
.videoiframe > iframe { min-height:600px; height:auto; border:0;}

.modal-dialog {	width:100%;  max-width: 850px; margin-top:80px;}
.general-btn { width:auto; display:inline-block; padding:10px 15px; font-size:16px; color:#fff; text-decoration:none; background:#28343e; margin-right:15px; cursor:pointer;  }


.hamele-client { background:#fff; width:100%; padding:50px 0;}
.hamele-client h1 { font-size:30px; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#28343e; margin-bottom:20px;}

.hamele-client  .cover { margin-bottom:30px;}


.successfull-campaigns { background:#f5f5f5; width:100%; padding:50px 0;}
.successfull-campaigns h1 { font-size:30px; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#28343e; margin-bottom:5px;}
.successfull-campaigns p { font-size:20px; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#313947; margin-bottom:40px;}
.successfull-campaigns .cover { margin-bottom:40px; margin-top:20px; }

.success-content { margin-top:50px; padding:0; text-align:center;}
.success-content h3 {  font-size:30px; width:100%; text-decoration:underline; color:#28343e; }
.success-content p { line-height:20px; font-size:18px; width:100%; padding:0;}

.success-content-2 { margin-top:50px; padding:0; text-align:center;}
.success-content-2 h3 {  font-size:30px; width:100%; text-decoration:underline; color:#28343e; }
.success-content-2 p { line-height:20px; font-size:18px; width:100%; padding:0;}

@media only screen and (min-width: 768px) {
.how-hamele-help { background:#28343e; width:100%; padding:30px; /*margin-top:-100px;*/ position:relative; z-index:33;}
.successfull-campaigns .cover { margin-bottom:100px; margin-top:20px; }

.success-content { margin-top:50px; padding:0; text-align:left;}
.success-content h3 {  font-size:35px; width:100%; text-decoration:underline; color:#28343e; }
.success-content p { line-height:20px; font-size:18px; width:100%; padding:0;}

.success-content-2 { margin-top:50px; padding:0; text-align:right;}
.success-content-2 h3 {  font-size:35px; width:100%; text-decoration:underline; color:#28343e; }
.success-content-2 p { line-height:20px; font-size:18px; width:100%; padding:0;}
}

.get-account { background:#28343e; width:100%; padding:60px 0 80px; background:url(../images/vidposter-blur.jpg) center bottom;}
.get-account h1 { font-size:30px; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#28343e; margin-bottom:25px;}
.get-account .general-btn { width:auto; display:inline-block; padding:10px 20px; font-size:16px; color:#fff; text-decoration:none; background:#28343e; margin-right:15px; cursor:pointer; text-transform:uppercase; }
.get-account .general-btn:hover { text-decoration:none;}


.sign-up { border: 1px solid #27AE60; background:#27AE60; width:auto; border-radius:25px;}

.hamele-package { background:#fff; width:100%; padding:130px 0 50px;}
.hamele-package h1 { font-size:30px; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#28343e; margin-bottom:20px;}

.hamele-package  .cover { margin-bottom:30px;}



.getitfree { background:#f5f5f5; width:100%; padding:60px 0 80px;}
.getitfree h1 { font-size:30px; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#28343e; margin-bottom:15px;}
.getitfree p { font-size:20px; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#313947; margin-bottom:20px;}
.getitfree .general-btn { width:auto; display:inline-block; padding:15px 25px; font-size:18px; color:#fff; text-decoration:none; background:#28343e; margin-right:15px; cursor:pointer; }
.getitfree .general-btn:hover { text-decoration:none;}


.pro {
	padding:9px;background:#fff;
	border:1px solid #27AE60;
	margin-bottom:30px;
    
}

.default {
	padding:9px;background:#fff;
	border:1px solid #dfdfdf;
	margin-bottom:30px;
	
    
}
@media only screen and (min-width: 768px) {
	.pro {
	padding:9px;background:#fff;
	border:1px solid #27AE60;

    
}

.default {
	padding:9px;background:#fff;
	border:1px solid #dfdfdf;

    
}
	
	}
.pricing-table strong { font-weight: 700; color: #3d3d3d; }

.pricing-table-header-pro {
    padding: 5px 0 5px 0;
    background: #f1f6f9;
}

.pricing-table-header-tiny h2, .pricing-table-header-small h2, .pricing-table-header-medium h2, .pricing-table-header-pro h2 { font-size:30px;  font-weight: 700; color:#28343; }
.pricing-table-header-tiny h3, .pricing-table-header-small h3, .pricing-table-header-medium h3, .pricing-table-header-pro h3 { font-size:20px; font-weight: 400; color:#28343;  }

.normal, .twoyear { display:none;}


.pricing-table-text {
    margin: 15px 30px 0 30px;
    padding: 0 10px 15px 10px;
    border-bottom: 1px solid #ddd;
    text-align: left;
    line-height: 30px;
    font-size: 18px;
    color: #888;
}

.pricing-table-features {
    margin: 15px 10px 0 10px;
    padding: 0 10px 15px 10px;
    border-bottom: 1px dashed #888;
    text-align: center;
    line-height: 20px;
    font-size: 16px;
    color: #888;
	min-height:250px;
}

.pricing-table-features p {padding:5px 0;}


.pricing-table-signup-pro {
    margin-top: 25px;
}

.pricing-table-signup-pro a {
    display: inline-block;
    width:auto;
    height: 50px;
	padding:0 15px;
    background: #27AE60;
    line-height: 50px;
	border-radius:4px;
    font-size:16px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}

.pricing-table-signup-pro a:hover {
    text-decoration: none;
	background-color:#28343e;
	color: #fff;
	}

.pricing-table-signup-pro a:active {
    background-color:#28343e;
	color: #fff;

}

.pricing-table-signup-default {
    margin-top: 25px;
    padding-bottom: 10px;
}

.pricing-table-signup-default a {
    display: inline-block;
    width:50%;
    height: 50px;
    background: #2980b9;
    line-height: 50px;
    
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}

.pricing-table-signup-default a:hover {
    text-decoration: none;
	background-color:#1d6391;
	color: #fff;
	}

.pricing-table-signup-default a:active {
    background-color:#1d6391;
	color: #fff;

}

.price-period {border:1px solid #dfdfdf;padding:3px; border-radius:5px; margin-bottom:30px; height:auto; font-size:20px; cursor:pointer;}
.price-period span { font-size:16px; color:#e44832}
.price-period .tableprice { padding:15px;}
.price-period .active { background:#27AE60; border:1px solid #27AE60; color:#fff !important;}

.top {margin-top:20px;}

.space {margin:10px;}


/*form styles*/
#fsform {
	width: 100%;
	margin: 30px auto 80px;
	text-align: center;
	position: relative;
	
}
@media (min-width: 640px) {
#fsform {
	width: 100%;
	margin: 60px auto 80px;
	text-align: center;
	position: relative;
	
}	
}

.step-complete, .step-name, .step-social, .step-invite { margin-bottom:30px !important; display:none;}

#fsform .fieldset {
	/*background: white;*/
	border: 0 none;
	/*border-radius: 3px;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.3);*/
	padding: 0 20px 15px;
	
	box-sizing: border-box;
	width: 92%;
	margin:0 4%;
	margin-bottom:30px;
	/*stacking fieldsets above each other*/
	position: absolute;
}
/*Hide all except first fieldset
#fsform .fieldset:not(:first-of-type) {
	display: none;
}*/
@media (min-width: 992px) {
#fsform .fieldset {
	/*background: white;*/
	border: 0 none;
	/*border-radius: 3px;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.3);*/
	padding:0 50px 30px;
	
	box-sizing: border-box;
	width: 90%;
	margin:0 5%;
	margin-bottom:30px;
	/*stacking fieldsets above each other*/
	position: absolute;
}
}
/*inputs*/
#fsform input, #fsform textarea {
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-bottom: 10px;
	width: 100%;
	box-sizing: border-box;
	font-family: montserrat;
	color: #2C3E50;
	font-size: 15px;
	z-index:9999;
}
#fsform .step-name .fnme, #fsform .step-name .lnme {width: 100%; margin-top:0;}
#fsform .step-name .lnme { margin-left:0; float:left;}
#fsform .step-name .fnme { float:left;}

#fsform .step-invite .invite {width: 100%; margin-top:0; float:left;}
#fsform .step-invite .inviteven {width: 100%; margin-top:0; float:left; margin-left:0;}

#fsform .step-social .sfb i,#fsform .step-social .stw i {  margin-right:10px; font-size:18px;}
#fsform .step-social .sfb {width: 100%; border-radius: 3px; font-size:16px; background:#3b5998; float:left; margin:0 0; padding:13px 20px; margin-bottom:10px;  margin-top:10px; color:#fff;}
#fsform .step-social .stw {width: 100%; border-radius: 3px; font-size:16px; background:#00aced; float:left; margin:0 0; padding:13px 20px; margin-bottom:25px;  margin-top:10px; color:#fff;}

@media (min-width: 640px) {
#fsform .step-name .fnme, #fsform .step-name .lnme {width: 48%; margin-top:25px;}
#fsform .step-name .lnme { margin-left:20px; float:right;}
#fsform .step-name .fnme { float:left;}

#fsform .step-invite .invite {width: 48%; margin-top:10px; float:left;}
#fsform .step-invite .inviteven {width: 48%; margin-top:10px; float:right; margin-left:20px;}


#fsform .step-social .sfb {width: 42%; background:#3b5998; float:left; margin:0 3%; margin-bottom:25px;  margin-top:10px;}
#fsform .step-social .stw {width: 42%; background:#00aced; float:right; margin:0 3%;  margin-bottom:25px;  margin-top:10px;}
}
/*buttons*/
#fsform .action-button {
	width:auto;
	min-width: 100px;
	background: #27AE60;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 4px;
	cursor: pointer;
	padding: 10px 20px;
	margin: 60px 5px 5px;
}
#fsform .action-button:hover, #fsform .action-button:focus {
background: #239F58; border-radius: 4px;
}

#fsform .claim-button {
	width:auto;
	min-width: 100px;
	background: #27AE60;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 4px;
	cursor: pointer;
	padding: 10px 20px;
	margin: 60px 5px 5px;
}
#fsform .claim-button:hover, #fsform .claim-button:focus {
background: #239F58; border-radius: 4px;
}
/*headings*/
.c-title {
	font-size: 30px;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 10px;
	font-weight:600;
	margin-top:0;
}
.c-subtitle {
	font-weight: normal;
	font-size: 20px;
	line-height:22px;
	color: #fff;
	padding:0 30px;
	margin-bottom: 30px;
}

.c-subtitle-left {
	font-weight: normal;
	font-size: 20px;
	line-height:22px;
	color: #fff;
	padding:10px 30px 0 0;
}

.c-note {
	font-weight: normal;
	font-size: 15px;
	color: #888;
	margin-bottom: 15px;
}
/*progressbar*/
#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
 display: block;
 margin-left:17px;
	/*CSS counters to number the steps*/
	counter-reset: step;
}


#progressbar li {
	list-style-type: none;
	color: white;
	text-transform: uppercase;
	font-size: 14px;
	width: 40px;
	position: relative;
	margin-bottom:15px;
	cursor:pointer;
}

#progressbar li span { display:block !important;}
#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 40px;
	line-height: 40px;
	display: block;
	font-size: 15px;
	color: #333;
	background: white;
	border-radius: 50%;
	margin: 0 auto 8px auto;
}
/*progressbar connectors*/
#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: white;
	position: absolute;
	left: -50%;
	top: 14px;
	z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
	background: #27AE60;
	color: white;
}


.imgselect img { width:100% !important;}
.imgselect { font-size:18px; line-height:20px; font-weight:400;}
@media (max-width: 768px) {

#progressbar li {
	list-style-type: none;
	color: white;
	text-transform: uppercase;
	font-size: 14px;
	width: 20%;
	float: left !important;
	position: relative;
}



}

@media (min-width: 1170px) {
#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
 display: block;
 margin-left:0;
	/*CSS counters to number the steps*/
	counter-reset: step;
}
/*progressbar*/
#fsform ul {padding:0; padding-left:0;}
}

@media (max-width: 380px) {

#progressbar li span { display:none !important;}
#progressbar {
	margin-bottom: 10px;
	
}	
}


@media only screen and (max-width: 992px) {
#top_bar {
	float:left;
	width:100%;
	height:800px;
	background:#28343e;
	display:none;
	padding:2%;
	color:#fff;
}
.imgselect img { width:60% !important;}
}


@media only screen and (max-width: 480px) {
#top_bar {
	float:left;
	width:100%;
	height:900px;
	background:#28343e;
	display:none;
	padding:2%;
	color:#fff;
}
.imgselect img { width:100% !important;}
}