/* flexbox options 

.flex-1col

.flex-2col
.flex-2col-item

.flex-3col
.flex-3col-item */

*, *::after, *::before {
	box-sizing: border-box;
}

body {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

.content {
	flex: 1 0 auto;
}

 /* /////////////////////////////// 

		HEADER NAV BAR -------------------------- */

header {
	display: -webkit-flex;
	display: -ms-flex;
    display: flex;
    
    -webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
    flex-wrap: wrap;
    
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
}

.nav-desktop {
    /* flexbox basics | https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox */
    display: -webkit-inline-flex;
	display: -ms-inline-flex;
    display: inline-flex;
    
    -webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
    flex-wrap: wrap;
    
    float: right;
}

.nav-mobile {
    -webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
    flex-wrap: wrap;
    
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    
}

/* /////////////////////////////// */

/* /////////////////////////////// 

		FLEXBOX GRIDS -------------------------- */

.flex-1col {
	display: -webkit-inline-flex;
	display: -ms-inline-flex;
    display: inline-flex;
    
    -webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
    flex-wrap: wrap;
    
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
}

.flex-1col-item {
	flex: 0 1 100%;
}


.flex-2col {
	display: -webkit-inline-flex;
	display: -ms-inline-flex;
    display: inline-flex;
    
    -webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
    flex-wrap: wrap;
    
    width: 100%;
    
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
}

.flex-2col-item {
	flex: 0 1 50%;
}

/* flex-2col-item */
.product-card { 
	flex: 0 1 40%;
}

.gallery {
	display: -webkit-inline-flex;
	display: -ms-inline-flex;
    display: inline-flex;
    
    -webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
    flex-wrap: wrap;
    
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
}




/* /////////////////////////////// */

/* /////////////////////////////// 

		RENTAL PAGE -------------------------- */

.rental-listing {    
    -webkit-justify-content: space-around;
    -ms-justify-content: space-around;
    justify-content: space-around;
}

.rental-listing-item {
	flex: 0 1 40%;
}



/* /////////////////////////////// */

/* /////////////////////////////// 

		MEDIA QUERIES -------------------------- */

@media (max-width: 50em) {
	.nav-desktop {
        display: none;
    }
    
    .nav-mobile {
        display: -webkit-flex;
	    display: -ms-flex;
        display: flex;
        
        flex-direction: column;
        flex: 1 1 100%;

        margin-bottom: 7em;
    }
    
    .nav-mobile-links a {
        display: flex;
        flex-direction: column;
        flex: 1 1 100%;
        
        -webkit-align-content: center;
        -ms-justify-content: center;
        justify-content: center;
    }

@media (max-width: 72em) {
	#faq {
		flex: 0 1 100%;
	}
}


@media (max-width: 79em) {
	.flex-2col {
		flex-direction: column;
		align-items: center;
	}

    .flex-2col-item {
        flex: 0 1 100%;
    }

	.gallery iframe {
		flex-direction: column;
		align-items: center;
	}

}


@media (max-width: 80em) {
	.home-info {
		flex-direction: column;
		align-items: center;
	}

}



/* /////////////////////////////// */

/* /////////////////////////////// 

		MOBILE NAV -------------------------- */



/* /////////////////////////////// */