/* 
ROSEbud Suite 
Version 0.2 started 14/9/18 
CSS Style Sheet
----
*/

/* Normalize for mobile viewport */
* {
    box-sizing: border-box;
}
/* Education is the Key to ALL Success - November 3rd 2015 */

body {
	margin: 0px;
	padding: 0px;
}

/* Element 1 */
/* Top Banner */

.header-promo-wrapper {
	padding: 15px;
	background: black;	
}

.header-promo-text {
	color: white;
	text-align: center;
	font-family: arial;
	font-size: 12px;
}
/* END Top Banner */
/* END Element 1 */


/* Element 2 */
/* Branding/Logo */
.branding {
		border: solid 0px red;
		margin: auto;
		margin-top: 20px;
/*		display: inline-block; */
		vertical-align: middle;
		text-align: center;
		width: 400px;
/*		width: calc(100% - 440px); */
}

@media (max-width: 1020px) { 

	.branding {
		width: 100%
	}
}

/* END Branding/Logo */
/* END Element 2 */

/* Element 3 */
/* Mobile Menu Icon */
#navbay {
		border: solid 0px red;
		clear: both;
/*		float: right; */
		display: block;
/*		margin-top:0%;
		margin-right:0%; */
		margin: auto;
		top: 0%; 
/*		right: 0%; */
		width:15%; 
		color: black;
/*		background-color: rgba(0,0,0,0.5); 
		background-color: darkblue; */
		padding:10px;
		text-align:center;
}

@media screen and (min-width: 760px) {
	#navbay {
		display: none;
	}	
}

/* END Mobile Menu Icon */
/* END Element 3 */


/* Element 4 */
/* Desktop Menu/Nav Bar */

.navbar {
		border: solid 0px red;
		margin: auto;
		margin-top: 30px;
		vertical-align: middle;
		text-align: center;
		width: 760px;
		font-family: arial;
		font-size: 14px;
}

@media screen and (max-width: 760px) {
	.navbar {
		display: none;
	}	
}


/* Menu Links No Decoration/Colour Change on Hover */
.navbar a:link, a:visited, a:visited {
    text-decoration: none;
	color:black;
}

.navbar a:hover {
    text-decoration: none;
	color:gray;
}
/* END Menu Links No Decoration/Colour Change on Hover */

/* END Desktop Menu/Nav Bar */
/* END Element 4 */


/* END Element 5 */
/* Mobile Menu/Navigator Slide-Over CSS */
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: black;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-family: "Lato", sans-serif;
    font-size: 25px;
    color: white;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* END Mobile Menu/Navigator Slide-Over CSS */
/* END Element 5 */


/* Element 6 */
/* Splash Image Section */

.splash {
		border: solid 0px red;
		margin: auto;
		margin-top: 30px;
		vertical-align: middle;
		text-align: center;
		width: 90%;
		font-family: arial;
		font-size: 22px;
}

@media only screen and (max-width: 760px) {
	.splash img.mobnoshow{
		display: none;
	}
}

@media only screen and (min-width: 760px) {
	.splash img.desknoshow {
		display: none;
	}
}


/*
@media screen and (max-width: 760px) {
	.splash {
		display: none;
	}	
}
*/

/* END Splash Image Section */
/* END Element 6 */

/* Element 7 */
/* Vertical Spacing Element */
.vertical-spacing-element {
		border: solid 1px white;
		margin: auto;
		margin-top: 50px;
		vertical-align: middle;
		text-align: center;
		width: 100%;	
		/* test */
		clear: left;
}
/* END Element 7 */

/* Element 8 */
/* About Us Element */
.about-us-element {
		border: solid 0px green;
		margin: auto;
		margin-top: 50px;
		vertical-align: middle;
		text-align: center; 
		width: 100%;	
}
/* END Element 8 */

/* Element 9 */
/* About Us Text Element */


@media screen and (min-width: 450px) {
.about-us-text {
	border: solid 0px blue;
	position: relative;
	float: left;
	padding: 10px;
	max-width:50%; 
	text-align:center;
}
}

@media screen and (max-width: 450px) {
.about-us-text {
	border: solid 0px blue;
	width:100%; 
	float: left;
/*	margin: auto; */
	padding: 10px;
}
}
/* END Element 9 */


/* Element 10 */
/* Directions Map */
@media screen and (min-width: 450px) {
.directions-map {
	border: solid 0px red;
	float: left; 
/*	clear:left; 
	margin-top:10%;
	margin-left:10%; */
/*	max-width:40%; */
}
}



@media screen and (max-width: 450px) {
.directions-map {
	border: solid 0px red;
/*	float: left; 
	max-width:40%; */
	clear:left; 
	margin-top:10%;
	margin-left:10%;
}
}
/* END Element 10 */


/* Element 11 */
/* Google Map Frame */
@media screen and (min-width: 450px) {
.google-map-frame {
	width: 600px;
	height: 450px;
}
	
}
@media screen and (max-width: 450px) {
.google-map-frame {
	width: 300px;
	height: 225px;
}
	
}

/* END Element 11 */




/* Element 12 */
/* KO Panel Container */

.ko-panelcontainer {
		border: solid 0px red;
		margin: auto;
		margin-top: 30px;
		vertical-align: middle;
		text-align: center;
		width: 1140px;
		font-family: arial;
		font-size: 15px;
}

@media screen and (max-width: 400px) {
	.ko-panelcontainer {
		width: 100%;
	}	
}

/* END Element 12 */

/* Element 13 Picture Menu Links */
.storyheading a {
	text-decoration: none;
	color: white;
}
/* END Element 13 */