@import url("style-reset.css");

/* Common ********************************************************************************************************************************/
html,
body {
  height: 100%;
}

body.signin,
body.signup{
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #f5f5f5;
}

.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}
.form-signin .checkbox {
    font-weight: 400;
}
.form-signin .form-control {
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 10px;
    font-size: 16px;
}
.form-signin .form-control:focus {
    z-index: 2;
}
.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}


/* Header -------------------------- */
#mainNav .navbar-nav .nav-item .nav-link.active, 
#mainNav .navbar-nav .nav-item .nav-link:hover {
    color: var(--golden-rod-yellow) !important;
}

#mainNav.navbar-shrink{
    background: var(--almost-black) !important;
}

.navbar {
    box-shadow: 0 0 1px !important;
}








/* Footer -------------------------- */
.footerLinks{
	background: var(--og-grey) !important;
	color: #DCD6C9;
	position: relative;
}
.footerLinks:after {
    content: '';
    display: block;
    width: 150px;
    height: 150px;
    background-image: var(--footer-links-after-bg);
    position: absolute;
    right: 50px;
    bottom: 20px;
    background-repeat: no-repeat;
    background-size: contain;
}
.footer-col{
	min-height: 300px;
}


#scrollTopBtn{
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;

    width: 50px;
    height: 50px;
    border-radius: 50%;

    display: none;
    align-items: center;
    justify-content: center;

    box-shadow: 0 4px 10px rgba(0,0,0,.2);
    transition: all .3s ease;
}

#scrollTopBtn:hover{
    transform: translateY(-3px);
}



/* Order Form -------------------------- */
.orderSearchMenuInput{
    padding: 10px 40px;
    border-radius:30px;
}
.orderSearchMenuIcon{
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    color:#999;
}
.orderSearchMenuClear{
    border-radius: 50px;
    width:48px;
    height:42px;
}
.orderSearchMenuSuggestions{
    z-index: 999 !important;
    max-width: 820px;
}
.orderSearchMenuSuggestions .list-group-item{
    padding: 10px 25px !important;
}
.orderSearchMenuSuggestions .mnuImg {
    width: 150px;
    height: 100px;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}
.orderSearchMenuSuggestionItem{
    z-index: 999 !important;
    max-height: 270px;
    overflow-y: auto;
    width: 95% !important;
}


.orderMenuWrap tr {
    border: 1px solid var(--og-grey) !important;
    background: var(--grey) !important;
}

.orderMenuQtyGroup {
    padding: 2px !important;
    width: 90px;
}
.orderMenuQtyGroup .qtyBtn {
    width: 24px !important;
    height: 34px !important;
    padding: 8px !important;
}

              
/* Page Query ========================================================== */


/* Page - Home -------------------------- */
header.masthead {
	height: 100vh;
    position:relative;
}
header.masthead::after {
    content: '';
    display: block;
	width: 100%;
	height: 100vh;
	background: #000000;
    position: absolute;
    top: 0;
    opacity: 0.7;
    z-index: 1;
}
header.masthead .homeBackgroundVideo{
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    height:100vh;
    transform:translate(-50%, -50%);
    object-fit:cover;
    z-index:-2;
}
header.masthead .container {
    position: relative;
    z-index: 2 !important;
}
header.masthead img {
    max-height: 350px;
}
 

.feature {
	background: var(--golden-rod-yellow) !important; 
}
.feature-blob-image {
    margin: 0 auto;
    width:100%;
    max-width:500px;
    aspect-ratio:4/5;
    -webkit-clip-path: url(#featureShape);
    clip-path:url(#featureShape);
}


 
.whatWeDo {
	background: var(--pale-white) !important; 
}



.menu {
	min-height: 50vh;
    position: relative;
	z-index: 1;
}
.menu::after {
    content: '';
    display: block;
	width: 100%;
	height: 100%;
	background: #000000;
    position: absolute;
    top: 0;
    opacity: 0.7;
    z-index: 1;
}
.menu .container {
    position: relative;
    z-index: 2 !important;
}
.menu h2,
.menu p{
	color: #ffffff;
}




	


.airports{
	background: var(--pale-white) !important; 
}
.airport-address{
    min-height: 60px;
}
.airport-google-map {
    background: #ffffff;
    padding: 10px;
}



.airports .btn {
    font-size: 1em !important;
    text-align: left;
}
.airports .airportLocation{
    padding-left: 100px;
    position: relative;
}
.airports .airportLocation:after {
    content: '';
    display: block;
    width: 90px;
    height: 100%;
    background: var(--airport-image);
    background-size:cover;
    background-repeat:no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}


.airports .btn-label {
	position: relative;
	left: -4px;
	display: inline-block;
	padding: 6px 12px;
	border-radius: 6px 0 0 6px;
	background: url('img/google-map-icon.png');
	background-size: cover;
	top:-7px;
}
/*.airports .btn-label::before{
    content: "";
    position: absolute;

    top: -40px;
    left: 50%;
    transform: translateX(-50%);

    width: 80px;
    height: 80px;

    background: url('img/google-map-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
}*/
/*
.concierge {
	background: #DCD6C9;
}
.concierge {
	background: #F2F0E9;
}*/



.about{
    background: var(--creamy-grey) !important;
}
.about .about-col,
.about .image-side{
    min-height:75vh;	
}
.about_1 .about-col{
    background: var(--creamy-grey) !important;
}
/*.about_1 .image-side{
    background:url('img/hi-we-are-sparrow.jpg') center/cover no-repeat;
}*/
.about_2 .about-col{
    background: var(--golden-rod-yellow) !important;
	color: #ffffff;
}
/*.about_2 .image-side{
    background:url('img/exclusively-for-aviation.jpg') center/cover no-repeat;
}*/
.about_3 .about-col{
    background: var(--og-grey) !important; 
	color: #DCD6C9;
}
/*.about_3 .image-side{
    background:url('img/an-effortless-experience.jpg') center/cover no-repeat;
}*/
.about_4 .about-col{
    background: var(--creamy-grey) !important;
}
/*.about_4 .image-side{
    background:url('img/culinary-excellence-not-automation.jpg') center/cover no-repeat;
}*/
.about_5 .about-col{
    background: var(--golden-rod-yellow) !important;
	color: #ffffff;
}
/*.about_5 .image-side{
    background:url('img/our-dedicated-team.jpg') center/cover no-repeat;
}	*/






.contact{
    background: var(--almost-black) !important;
}
.contact p{
    
	color: #ffffff;
}
textarea.contactMessage{
    min-height: 220px;
}	  


/* Desktop Query ========================================================== */
@media only screen and (min-width: 1023px) {
	#mainNav .navbar-brand img {
        height: 3rem;
    }
}


/* Mobile Query ========================================================== */
@media only screen and (max-width: 1024px) {
	header.masthead {
		height: 50vh;
	}
	header.masthead::after {
		height: 50vh;
	}
    header.masthead .homeBackgroundVideo{
        height:50vh;
    }
	header.masthead img {
		max-height: 150px;
	}
	

	
	
	.about .about-col,
	.about .image-side{
		min-height:50vh;	
	}
	.about_1 .row,
	.about_3 .row	{
		flex-direction: column-reverse;
	}
	
	
	.contact .btn{
		width: 100%;
	}
	
	.footer-col {
		min-height: 100px;
	}
	.footerLinks {
		padding-bottom: 200px;
	}
	.footerLinks:after {
		left: 0;
		right: 0;
		bottom: 20px;
		margin: auto;
	}
}


/* Media Query ========================================================== */
@media screen and (max-width : 320px){

}
@media screen and (min-width : 321px) and  (max-width: 480px){

}
@media screen and (min-width : 481px) and  (max-width: 640px){

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

}
@media screen and (min-width : 769px) and (max-width : 1024px){

}
@media screen and (min-width : 1025px) and (max-width : 1224px){

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

}


/* iphone ========================================================== */

/* iphone 3 -------------------------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) {

}
/* iphone 4 -------------------------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { 

}
/* iphone 5 -------------------------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { 

}
/* iphone 6, 6s -------------------------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { 

}
/* iphone 7, 8 -------------------------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { 

}
/* iphone 6+, 6s+, 7+, 8+ -------------------------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) { 

}
/* iphone X -------------------------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { 

}


/* ipad ========================================================== */

/* For general iPad layouts -------------------------- */
@media only screen and (device-width: 768px) {

}
/* For portrait layouts only -------------------------- */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {

}
/* For landscape layouts only -------------------------- */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {

}


/* ipad pro ========================================================== */

/* Portrait and Landscape -------------------------- */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) {

}
/* Portrait -------------------------- */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {

}
/* Landscape -------------------------- */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) {

}
/* Custom CSS End ########################################################## */