/**********Body**********/
	body{
		background: #d9e5cd;
		color: #212629;
	}
/**********Header**********/
	header nav.navbar{
		background: #199792;	
	}
	header nav.navbar .navbar-brand{
		color: #fff;
	}
	header nav.navbar a{
		color: #fff;
		display: inline-block;
	}
	header nav.navbar a:hover{
		color: #ffd728;
		cursor: pointer;
	}
	header nav.navbar .selected{
		color: #ffd728;
	}
	header nav.navbar button{
		float: right;
		color:white;
	}
/**********Feature**********/
	.feature-wrapper{
		background: #31383d;
	}
	.feature-wrapper a{
		display: inline;
	}
	.feature-wrapper a ,.feature-wrapper a:visited, .feature-wrapper i {
		color: white;
		text-decoration: none;
	}
	.feature-wrapper a:hover{
		color: #ffd728;
	}
/**********Footer**********/
	footer, footer a,footer a:visited{
		color: #fff;
	}
	footer a:hover{
		color: #ffd728;
		text-decoration: none;
	}
	.social, .copyright{
		background: #31383d;
	}
	.links{
        background: #212629;
    }
	.links hr{
		background-color: white;
		width: 60px;
	}
/**********Application**********/
    legend{
        background: #199792;
        border: 1px solid #212629;
        border-radius: 2px;
        background-clip: padding-box;
        -webkit-border-radius: 5px;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        text-transform: uppercase;
    }
    .required{
        background: url(../img/required.png) no-repeat center right;
        padding-right: 1.2em;
    }
    .div-error{
        padding-top: .3em;
    }
    .error{
        color: #ff3f34;
        font-size: 1em;
        padding-top: 50em;
    }
    .app_submit{
        font-size: 1.5em;
        background: #199792;
        border: 1px solid #212629;
        border-radius: 2px;
        background-clip: padding-box;
        -webkit-border-radius: 5px;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        text-transform: uppercase;
        width: 100%;
        margin-bottom: 1em;
        padding: 1em;
    }
    .app_submit:hover{
        font-size: 1.5em;
        background: #ffd728;
        border: 1px solid #212629;
        border-radius: 2px;
        background-clip: padding-box;
        -webkit-border-radius: 5px;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        text-transform: uppercase;
        width: 100%;
        margin-bottom: 1em;
        padding: 1em;
    }
/***********Calculator**********/
	.slidecontainer{
		margin-bottom: 1em;
		width: 100%;
		background: #199792;
	}
	.slider{
		-webkit-appearance: none; 
		appearance: none;
		width: 80%;
		height: 23px;
		background: #000; 
		outline: none;
		opacity: 0.7; 
		-webkit-transition: .2s;
		transition: opacity .2s;
		margin: 1em auto;
	}
	.slider:hover {
		opacity: 1;
	}
	.slider::-webkit-slider-thumb {
		-webkit-appearance: none; 
		appearance: none;
		width: 20px; 
		height: 35px; 
		background: #ffd728;
		cursor: pointer; 
	}
	.slider::-moz-range-thumb {
		width: 23px; 
		height: 23px; 
		background: #ffd728; 
		cursor: pointer;
	}
/**********************************/
/***********Small devices**********/
/**********************************/
@media (max-width: 576px) {
/**********Hero**********/
	.hero{
		margin-top: 3.5em;
		position: relative;
	}
	.hero img{
		display: block;
		height: auto;
	}
	.hero-block {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(25,151,146,0.3);
	}
	.hero-text{
		text-align: center;
	}
	.hero-header {
		background-color: #199792;
		color: #fff;
		font-size: 1.5em;
		margin: 30% auto 5px;
		padding: 0.3em 0.3em;
	}
	#hero-btn{
        background: #199792;
        font-size: 3em;
		margin: 0 auto;
		padding: 0.1em ;
		border: none;
		border-radius: .1em;
        outline: none;
        color: #fff;
    }
    #hero-btn:hover{
		font-size: 3em;
		border: none;
		outline: none;
		color: #ffd728;
		padding: 0.1em;
    }
	.static{
		margin-top: 4em;
	}
	
/**********Application**********/
	.form{
		margin-top: 4em;
	}

}
/**********************************/
/***********576px To 768px*********/
/**********************************/
@media (min-width: 576px) and  (max-width: 768px){
/**********Hero**********/
	.hero{
		margin-top: 3.5em;
		position: relative;
		width: 100%;
	}
	.hero img{
		display: block;
		height: auto;
	}
	.hero-block {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(25,151,146,0.3);
	}
	.hero-text{
		position: absolute;
		top: 25%;
		left: 40%;
		text-align: center;
	}
	
	.hero-header {
		background-color: #199792;
		color: #fff;
		font-size:25px;
		padding: 16px 32px;
	}
	#hero-btn{
        background: #199792;
        font-size: 3em;
        outline: none;
        border: none;
        padding: 0.5em 0.5em;
        border-radius: .1em;
        color: #fff;
		width: 300px;
    }
    #hero-btn:hover{
		font-size: 3em;
		outline: none;
		border: none;
		color: #ffd728;
		padding: 0.5em 0.5em;
    }
	.static{
		margin-top: 4em;
	}
}
/**********************************/
/**********Medium devices**********/
/**********************************/
@media (min-width:768px){
/**********header**********/
	header nav.navbar .navbar-brand {
        font-size: 2em;
    }
    header nav.navbar .navbar-nav li{
        width: 6em;
        text-align: center;
    }
/**********Hero**********/
	.hero{
		margin-top: 6em;
		position: relative;
		width: 100%;
	}
	.hero img{
		display: block;
		height: auto;
	}
	.hero-block {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(25,151,146,0.3);
	}
	.hero-text{
		position: absolute;
		top: 20%;
		left: 48%;
		text-align: center;
	}
	.hero-header {
		background-color: #199792;
		color: #fff;
		font-size:25px;
		padding: 16px 32px;
	}
	#hero-btn{
        background: #199792;
        font-size: 3em;
        outline: none;
        border: none;
        padding: 0.5em 0.5em;
        border-radius: .1em;
        color: #fff;
		width: 300px;
    }
    #hero-btn:hover{
		font-size: 3em;
		outline: none;
		border: none;
		color: #ffd728;
		padding: 0.5em 0.5em;
    }
	.static{
		margin-top: 6em;
	}
}
/****************************************/
/*Large devices (desktops, 992px and up)*/
/****************************************/
@media (min-width: 992px) {
/**********header**********/
	header nav.navbar .navbar-brand {
        font-size: 2em;
    }
    header nav.navbar .navbar-nav li{
        width: 6em;
        text-align: center;
    }
/**********Hero**********/
	.hero{
		margin-top: 6em;
		position: relative;
		width: 100%;
	}
	.hero img{
		opacity: 1;
		display: block;
		height: auto;
		transition: .5s ease;
		backface-visibility: hidden;
		-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
		filter: grayscale(0%);
	}
	.hero-block {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		opacity: 0;
		transition: .5s ease;
		background: rgba(25,151,146,0.3);
		transition: .5s ease;
		transition: .5s ease;
		text-align: center;	
	}
	.hero-text{
		transition: .5s ease;
		opacity: 0;
		position: absolute;
		top: 30%;
		left: 70%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}
	.hero:hover img {
		-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
		filter: grayscale(100%);
		opacity: 1;
	}
	.hero:hover .hero-block ,.hero:hover .hero-text{
		opacity: 1;
	}
	.hero-header {
		background-color: #199792;
		color: black;
		font-size:25px;
		padding: 16px 32px;
	}
	#hero-btn{
        background: #199792;
        font-size: 3em;
        outline: none;
        border: none;
        padding: 0.5em 1em;
        border-radius: .1em;
        color: #fff;
		width: 500px;
    }
    #hero-btn:hover{
		font-size: 3em;
		outline: none;
		border: none;
		color: #ffd728;
		padding: 0.5em 1em;
    }
}
/*****************************************************/
/******Extra large device (Laptops,1200px and up)*****/
/*****************************************************/
@media (min-width: 1200px) {
/**********header**********/
    header nav.navbar .navbar-brand {
        font-size: 2em;
    }
    header nav.navbar .navbar-nav li{
        width: 6em;
        text-align: center;
    }
}