/***** BEGIN RESET *****/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, 
caption, tbody, tfoot, thead, tr, th, td 

div {
	background: transparent;
	border: 0; margin: 0; padding: 0;
	display: block;                          	
}

ol, ul {list-style: none;}

/***** END RESET *****/
/**NOTE: All main styles prioritize phone sizes.**/

body, html {
	background:#000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;	
}

.floatleft  {float:left;}
.floatright {float:right;}
.clear  {clear:both;}

.wrap {
	width:100%;
	margin:0 auto;
}

.flexwrap {
	display:flex;	/**Sets outer FlexBox**/
	display: -webkit-flex;  
	flex-flow:column;
	width:100%;
	min-height:600px;
	margin:0;
	position:relative;
}

/************ LOGO & NAV ***********/

.logo_nav_wrapper {
	flex:0 0 auto;
	position:relative;
}

.logo {	/* To make logo responsive, use max-width:100%. It won't display larger than actual width of image (400px). */
	width:100%;
	max-width:385px;
	flex-grow:1;
	margin:0 auto;
	position:relative;
	z-index:20;
}	 

.nav {
	margin:0 auto 10px;
	position:relative;
	z-index:10;
}

.splashface {	/** Homepage Face Photo **/
	display:block; 
	width:100%;
	margin:20px auto;
	border:1px orange solid;
}


.nav a {		/*It's possible to stack gradients. Check notes.*/
	background:linear-gradient(90deg, rgba(0,0,0,0), rgba(195,0,0,.3), rgba(0,0,0,0) 100%);
	display:block;
	margin:4px auto;
	text-align:center;
	text-transform:uppercase;
	text-decoration:none;
	color:orange;
	letter-spacing:2px;
	line-height:20px;
	font-size:11px;	
}
.nav a:hover {
	background:linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.8), rgba(0,0,0,0) 100%);
	color:yellow;
}

.splashcomingsoon {	/** Homepage Coming Soon Photo **/
	flex:0 0 auto;
	position:absolute;
	top:0;
	right:0;
}

.bannerstyles {      /** DELETE THIS AFTER STURGIS!!!! **/
	position:relative; 
	display:block;  
	width:60%; 
	margin:0 auto;
}

.facebook {
	display:block; 
	/*width:8%; */
	width:50px;
	height:50px;
	margin:10px auto;
}


/******HOMEPAGE******/

.splash_small { 	/*Homepage Photo -- phone width */
	background-position:center;
	display:block;
	width:100%;
	margin:0 auto;	
	z-index:0;
}

.monique_small {
	min-height:330px;
	width:100%;
	
}

.upcoming { 	/*Upcoming Events -- phone width */
	display:flex;
	margin:10px auto 0;	
	z-index:0;
}
.upcoming_sturgis { 	/*Upcoming Events -- phone width */
	background:url("../siteart/bannersturgis21.png") no-repeat;
	background-position:center;
	background-size: contain;
	display:block;
	margin:10px auto 0;	
	z-index:0;
}
.splashface_big { 	/*Upcoming Events -- phone width */
	display:flex;
	margin:10px auto 0;	
	z-index:0;
}

.splashface_big img { 
	justify-content: center;
}

.splash_big {	/*Homepage Photo -- full width */
	display:none;
}
.splash_big2 {
	float:left;
	display:flex;
	width:100%;
	postion:relative;
}


/*********** FLEX GALLERY PAGES *********/

.gallery {width:100%;}
.body, .faces, .sturgis, .jeans, .bellies {display:block; max-height:55px; margin:0 auto;} 

/*Sticky Gallery Headers*/
.header { 	/*It's possible to stack gradients. Check notes.*/
	background:linear-gradient(90deg, rgba(0,0,0,.5), rgba(195,0,0,.5), rgba(255,140,0,1), rgba(255,140,0,1),rgba(195,0,0,.5), rgba(0,0,0,.5) 100%);
	height:50px;
	width:100%;
	text-align:center;
	padding:4px 0;
	border-bottom:5px black solid;  
	overflow:hidden;
}

.content {padding:0px;} /* Page content */

.sticky {	/* The sticky class is added to the header with JS when it reaches its scroll position */
	position:sticky;
	top:0;
	width:100%;
}

.sticky + .content {	/* Add some top padding to the page content to prevent sudden quick movement 
(as the header gets a new position at the top of the page (position:fixed and top:0) */
	padding-top: 10px;
}
/*Sticky Header End*/

/**MASONRY FOR GALLERIES**/

.masonry_wrapper_pages {
	margin:0;
	border-bottom:1px orange solid; margin-bottom:10px;				
}
.masonry {
	margin:0;
    padding:0;
	-moz-column-gap:0;
    -webkit-column-gap:0;
    column-gap:0;
	font-size:0;
}
.item {
    display:inline-block;
    padding:3px;
    margin:0 auto;
    width:100%;
    box-sizing:border-box;
    /**-moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;**/
}
.item img {width:100%;}

/**Responsive Gallery Widths**/

@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 550px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}	

@media only screen and (min-width: 800px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 1200px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 2300px) {
	.masonry {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }	
}


/***************CONTACT & ABOUT PAGE*****************/ 


.about {
	display:block;
	margin:60px;
	color:orange; 
	font-size:18px;
	line-height:28px;
}

.contactme {
	display:block; 
	max-height:55px; 
	margin:0 auto;
}	
.contact {
	display:block;
	width:100%;
	text-align:center;	
}
.contact a {
	font-size:14px;
	color:orange;
	margin-right:20px;
	text-decoration:none;
	letter-spacing: 1px;
}
.contact a:hover {
	color:yellow;
	text-decoration:underline;
}
.contact span {
	font-size:14px;
	color:orange;
	margin-right:20px;
	letter-spacing: 1px;
}


/******SOCIAL MEDIA******/

.pinterest {
	width:16px;
	margin:0 auto;
}


/******FOOTER******/

.footer {
	position:absolute;
	bottom:0;
	right:10px;
}
.brva img {
	display:block;	
	max-width:75px;
	position:fixed;
	right:0px;
	bottom:0px;
}

/******RESPONSIVE CODE FOR LARGER SIZES******/

@media only screen and (min-width:550px) {
	.wrap {flex-flow:row;}
 	.one_quarter {width:30%; float:left;} 
	.three_quarters {width:70%; float:left;}
}

@media only screen and (min-width:700px) {
	.splash_small {display:none;}
	
	.splash_big {
		background-image:url("../siteart/monique_big.png") no-repeat;
		width:50%;
		float:right;
		display:block;
	}
	
	.splash_big2 {
		background-image:url("../siteart/banner_sturgis_2024.jpg") no-repeat;
		width:50%;
		float:right;
		display:block;
		margin-top:70px;
	}
	
	.monique_big {
		display:block;
		width:100%;
	}
		
	.splashface {	/** Homepage Face Photo **/
		display:block; 
		width:60%;
		margin:20px auto;
		border:1px orange solid;
	}

	.bannerstyles {      /** DELETE THIS AFTER STURGIS!!!! **/
		position:relative; 
		display:block;  
		width:60%; 
		margin:0 auto;
	}
	
	.logo_nav_wrapper {
		width:50%;
		float: left;
		display:block;
	}
	.logo {margin:30px auto 0;}
	.nav {width:60%;}
	.nav a {
		background:linear-gradient(90deg, rgba(0,0,0,0), rgba(195,0,0,.3), rgba(0,0,0,0) 100%);
		line-height:30px;
		font-size:13px;
	}
	.nav a:hover {
		background:linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.8), rgba(0,0,0,0) 100%);
		color:yellow;
	}
	.pagenamebg {  /* This is fullsize code  */
		background: rgba(0, 0, 0, 0.6); /* Black background with 0.6 opacity */
		height:40px;
		width:100%;
		text-align:center;
		padding:8px 0;
		position:fixed;
		top:0;
		z-index:1000;
	}
}

@media only screen and (min-width:1200px) {
	.wrap {height:100%;}
 	.one_quarter {width:20%; float:left;}
	.three_quarters {width:80%; float:left;}

	.pagenamebg {  /* Full Size  */
		background: rgba(0, 0, 0, 0.6); /* Black background with 0.6 opacity */
		height:40px;
		width:100%;
		text-align:center;
		padding:8px 0;
		position:fixed;
		top:0;
		z-index:1000;
	}
	
	.logo_nav_splash_wrapper {
	width: 80%;
	margin: 0 auto;
	}
	
}