/*------------------------------------------------------------------

[Landing Page Responsive Stylesheet]

	Theme:			Keyla
	Description: 	Responsive Business Portfolio Theme
	Version:		1.0
	Designed By:	Klassio

-------------------------------------------------------------------*/


/*------------------------------------------------------------------
[# Min Width: 1200px]
*/

@media (min-width: 1200px) {
	
	

}

/*------------------------------------------------------------------
[# Max Width: 1100px]
*/

@media (max-width: 1180px) {
	
	.input-medium {
		width: 120px;
	}
	
	.view .mask{
	  width:100%;
	}
	
	.view .mask h2{
		margin: 10px 0 0 0;
	}
}


/*------------------------------------------------------------------
[# Max Width: 1050px]
*/

@media (max-width: 1050px) {
	
	.input-medium {
		width: 110px;
	}
	
}


/*------------------------------------------------------------------
[# Min Width: 767px / Max Width: 979px]
*/

@media (min-width: 767px) and (max-width: 979px) {
	

	.pricing-plans .pricingtable-container {
	    width: 50% !important;
	    margin-bottom: 2em;
	}	
	
	
}




/*------------------------------------------------------------------
[# Max Width: 979px]
*/

@media (max-width: 979px) {
	

	#heading-wrapper{
		min-height:80px; /* Specified for looking good before loading */
	}
	
	.heading-image img{
		width:100% !important;
		height:auto !important;
	}
	#heading-wrapper.heading-image .hs-content {
		margin-top:0px !important;
	}

	#heading-wrapper.heading-image .hs-content small {
		display:inline;
		font-size:16px;
	}
	
	#heading-wrapper.heading-slider, .heading-slider .hs-container, .outerC {
		height:430px !important;
	}
	.title{
		margin-bottom:5px !important;
	}
	h1.title {	
		font-size:30px;
		line-height:70px !important;
		text-align: center !important;
	}
	h2.title {
		font-size:27px;
		line-height:50px !important;
		text-align:center !important;
	}
	#heading-wrapper.heading-slider .hs-content .big {
		font-size:30px !important;
		line-height:35px !important;
		padding:0;
		box-shadow:10px 0px 0px #222, -10px 0px 0px #222;
	}
	#heading-wrapper .hs-content .text {
		font-size:22px !important;
		line-height:30px !important;
		padding:0;
	}
	

	/*----------------------------
	[Navbar / .navbar]
	*/
		
	.navbar {
	background: rgb(0, 0, 0)!important;
	
	}	
	
	.navbar-fixed-top .navbar-inner {
		padding: 10px;
	}
	
	.navbar .brand {
		top: 0;
	}
	
	.navbar .nav > li > a:hover , .navbar .nav > li > a:active{
		color: #fff !important;
		background:#ff9600;
	}
	
	.nav-collapse.in {		
		margin-top: 4em;
	}
	
	
	/*----------------------------
	[Subpage / #subpage-]
	*/
	
	#subheader .container {
		padding: 0;
		
		width: auto;
	}
	
	#subheader .inner {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	/*----------------------------
	[Content]
	*/
	.input-medium {
		width: 100px;
	}
	
	.view .mask p{
	  display:none;
	}
	
	/*----------------------------
	[Pricing Table]
	*/
	
	
	.pricing-plans .pricingtable-container {
	    width: 100% !important;
	    margin-bottom: 2em;
	}
	
	
}


/*------------------------------------------------------------------
[# Max Width: 767px]
*/

@media (max-width: 767px) {

	
	/*----------------------------
	[Content]
	*/
	
	.input-medium {
		width: 100px !important;
	}
		
	.view .mask,.view .content {
	  display:none;
	}
	
	#heading-wrapper.heading-image .center h1 {font-size: 24px;}
	
	/*----------------------------
	[Subheader / #subheader]
	*/
	
	#subheader {
		margin-left: -20px;
		margin-right: -20px;
	}
	
	#subheader .inner {
		padding-top: 8px;
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 8px;
	}
	
	#subheader h1
	, #subheader h2
	, #subheader h3
	, #subheader h4
	, #subheader h5
	, #subheader h6 {
		font-size: 18px;
	}
		
	
	/*----------------------------
	[Footer / #footer]
	*/
	
	#footer {
		margin-right: -20px;
		margin-left: -20px;
	}
	
	#footer .inner {
		padding-right: 20px;
		padding-left: 20px;
	}
	
	#footer-terms {
		text-align: left;
	}
	
	
	/*----------------------------
	[Extra / #extra]
	*/
	
	#extra {
		margin-right: -20px;
		margin-left: -20px;
	}
	
	#extra [class*="span"] {
		margin-bottom: 3em;
	}
		
	
	/*----------------------------
	[Screenshots / #screenshots]
	*/
	
	#screenshots {
		margin-right: -20px;
		margin-left: -20px;
	}
	
	#screenshots .inner {
		padding-right: 20px;
		padding-left: 20px;
	}
	
	.screenshot {
		margin-bottom: 1.5em;
	}
	

}

/*------------------------------------------------------------------
[# Max Width: 320px]
*/

@media (max-width: 320px) {

	/*----------------------------
	[Content]
	*/
	
	.input-medium {
		width: 100px !important;
	}
	
	
}