/*
	========================================
	LUCKY ONE PAGE BUSINESS THEME
	========================================

	@author			: @avriqq
	@version		: v1.1
	@date-create	: 09/01/2014
	@last-update	: 09/24/2014
	@file-name		: responsive

*/

.rheader img { width: 80px; margin-bottom: 20px;}
.gallery .bg-one { background: #00D9A3; }

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 736px) { 
#eventInfo li { font-size: 11px !important; }
	.gallery-lazyload { width: 49.5% !important; }
	#spacey { height: 50px !important; background: #000; }
	.navbar-default .navbar-brand span { 
		background: no-repeat url(/img/boothie_w.svg) 15px 9px; background-size: 150px; display: block; height: 60px; width: 200px;
	}
	
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

	.gallery-lazyload { width: 33% !important; }
	#spacey { height: 120px; background: #000; }
	#header { 
		min-height: 225px  !important; 
	}
	
	#header .carousel-inner > .item{
		min-height: 225px !important;  
		padding-top: 0px !important;  
	}

	.navbar-default .navbar-brand span { 
		background: no-repeat url(/img/boothie_w.svg) 15px 5px; background-size: 40px; display: block; height: 60px; width: 60px;
	}
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

	#spacey { height: 120px; background: #000; }
	#header { 
		min-height: 400px  !important; 
	}
	
	#header .carousel-inner > .item{
		min-height: 400px !important;  
		padding-top: 20px !important;  
	}

	
	.navbar-default .navbar-brand span { 
		background: no-repeat url(/img/boothie_w.svg) 15px 5px; background-size: 180px; display: block; height: 60px; width: 200px;
	}
}

@media screen and (max-width: 767px) {
	.bg-one { height: 50px; }
    #spacey { height: 50px; }
	#imgholder { background-size: 100% 100% !important; }
	.navbar-default .navbar-brand {
		padding: 0; margin: 0; 
	}
	.navbar-default .navbar-brand span { 
		background: no-repeat url(/img/boothie_w.svg) 5px 5px; background-size: 120px; display: block; height: 40px; width: 200px;
	}	
	
}

@media screen and (min-width: 768px) and (max-width: 992px) {

	#content-top {
		margin-top: 100px;
	}

	
	#imgholder { background-size: 100% 100% !important; }
	
	#header { 
		min-height: 450px  !important; 
	}
	
	
	#header .carousel-inner > .item{
		min-height: 450px !important;  
		padding-top: 130px !important;  
	}

	
	/* footer */
	.footer .footer-widget-logo{
		text-align: center;
	}
	

	.navbar-default{
		border: 0;
	}
	
		.navbar-nav { margin-top: 28px; }
/*
	.navbar-default .navbar-brand span { 
		background: no-repeat url(/img/boothie.svg) 15px 5px; background-size: 40px; display: block; height: 60px; width: 60px;
	}
*/
	
}

@media screen and (min-width: 992px) {
	
		#content-top {
		margin-top: 100px;
	}

	/* wide screen */

	/* navbar */
	.navbar-default{
		/*
		padding: 40px 0 30px;
		*/
		background-color: transparent;
		border-color: transparent;
		
		-webkit-transition: all 0.3s ease-in-out;
		   -moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			 -o-transition: all 0.3s ease-in-out;
				transition: all 0.3s ease-in-out;
	}
	.navbar-nav { margin-top: 28px; }
	.gallery .navbar-brand span { 
		background: no-repeat 10px 10px url(/img/boothie_w.svg); background-size: 150px; display: block; width: 200px;
	}
	.navbar-default .navbar-brand span { 
		background: no-repeat 10px 10px url(/img/boothie.svg); background-size: 150px; display: block; width: 200px;
	}
	
}


@media screen and (min-width: 1200px){

	#content-top {
		margin-top: 100px;
	}

	.bg-one {
		background: #FFFFFF; /*#00D9A3;*/
	}

	.gallery .navbar-brand span { 
		background: no-repeat url(/img/boothie_w.svg) 15px 9px; background-size: 220px; display: block; width: 250px;
	}
	
	.navbar-default .navbar-brand { 
	width: 250px;
	background: no-repeat url(/img/boothie_pb_1.png);

	background-size: 250px;
	height: 0;
	padding: 0; /* reset */
	padding-bottom: 80px;
	height: 195px;
	
	}
	
	.navbar-default .navbar-brand span { 
	
		background: none;
	
	}
	
		.gallery .navbar-brand { 
			background: none;
		}
	

}

@media screen and (max-width: 767px){
	
	#content-top {
		margin-top: 50px;
	}
	
	/* navbar */
	.navbar-default{
		border: none;
	}
	
	.navbar-brand img {
		width: 180px !important; padding-left: 10px; padding-top: 8px;
	}

	.navbar-default.navbar-scroll{
		padding: 0;
	}

	.navbar-default .navbar-brand{
		font-size: 18px;
		color: #fff;

	}
	
	.navbar-default .navbar-brand span{
		background: no-repeat url(/img/boothie.svg) 3px 3px; background-size: 120px; display: block; width: 125px;
	}
	
	.gallery .navbar-brand span{
		background: no-repeat url(/img/boothie_w.svg) 3px 3px; background-size: 120px; display: block; width: 125px;
	}

	.navbar-default.navbar-scroll .navbar-brand{
		color: #fff;
		font-size: 14px;
		padding-left: 12px;
		padding-right: 14px;
	}

	.navbar-default .navbar-brand:hover,
	.navbar-default.navbar-scroll .navbar-brand:hover,
	.navbar-default .navbar-brand:focus,
	.navbar-default.navbar-scroll .navbar-brand:focus{
		background-color: #282828;
		color: #fff;
	}

	.navbar-nav {
		background: #000;	
	}
	.navbar-default .navbar-nav > li{
		text-align: center;
		padding: 10px; 
		border-bottom: 1px solid #333;
		
	}
	
	.navbar-default .navbar-nav > li > a{
		color: #ccc;
	}

	.navbar-default .navbar-nav > li > a:hover,
	.navbar-default .navbar-nav > li > a:focus,
	.navbar-default .navbar-nav > .active > a,
	.navbar-default .navbar-nav > .active > a:hover{
		position: relative;
		color: #fff;
	}

	.navbar-default .navbar-nav > li > a:hover::after,
	.navbar-default .navbar-nav > li > a:focus::after,
	.navbar-default .navbar-nav > .active > a::after,
	.navbar-default .navbar-nav > .active > a:hover::after{
		content: '';
		display: none;
	}

	/*#clients { display: none; }*/
	.hide-m { display: none; }
	.atod { display: block; width: 90%; margin-left: auto; margin-right: auto; }
	
	.slider-m { padding: 10px !important;  }
	.page-title h2 { font-size: 33px !important; }
	.pbs-content-panel h3 { font-size: 25px !important; }
	.btn-m { border-bottom: 2px solid #FFF; }
	 

	/* header */
	#header{
		min-height: 150px;
		height: auto;
	}

	#header .carousel-inner > .item{
		padding: 60px 0;
		width: 100%;
		min-height: 150px;
		height: auto;
	}

	#header .carousel-inner > .item .slider-caption{
		position: relative;
		z-index: 2;
		padding: 40px 0 0;
		text-align: center;
		color: #fff;
	}

	#header .carousel-inner > .item .slider-caption h2{
		font-size: 40px;
		line-height: 48px;
		font-weight: 700;
	}

	#header .carousel-inner > .item .slider-caption p{
		font-size: 18px;
		line-height: 24px;
		padding-left: 10%;
		padding-right: 10%;
	}

	/* page */
	#service,
	#about,
	#portfolio,
	#component,
	#contact{
		padding: 90px 0 80px;
	}

	/* about */
	.team-container img{
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	
	/* portfolio */
	.portfolio-item{
		float: left;
		width: 50%;
	}

	.portfolio-item > .item-link > .item-desc p{
		display: none;
	}

	/* modal */
	.modal-portfolio .modal-close{
		position: absolute;
		top: 25px;
		right: 25px;
		width: 60px;
		height: 60px;
	}

	.modal-portfolio .modal-close::before{
		content: '';
		position: absolute;
		left: 30px;
		top: -10px;
		width: 1px;
		height: 80px;
	}

	.modal-portfolio .modal-close::after{
		content: '';
		position: absolute;
		right: 30px;
		top: -10px;
		width: 1px;
		height: 80px;
	}
}

@media screen and (max-width: 480px){
	/* navbar */
	.navbar-default .navbar-brand{
		font-size: 16px;
		line-height: 20px;
	}

	#header .carousel-inner > .item .slider-caption p{
		font-size: 18px;
		line-height: 24px;
		padding-left: 5%;
		padding-right: 5%;
	}
	
	/* portfolio */
	.portfolio-item{
		float: left;
		width: 100%;
	}

	.portfolio-item > .item-link > .item-desc h3{
		margin-top: 60px;
	}
	
	.font2 { font-size: 60px !important; line-height: 50px !important; }
	.rheader img { width: 60px; margin-bottom: 20px;}
	#heropic { min-height: 500px !important; }
	#heropic-center { height: 450px !important; }
	#heropic-menu a { margin-bottom: 5px;  }
	
}