@charset "UTF-8";
/* CSS Document */

* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { 
	padding: 0;
	margin: 0;
}

h1, h2,h3 {
	text-decoration: none;
	font-family: 'Merriweather', serif;
}
	
html, body {width: 100%; height: 100%;cursor:default;padding: 0;}

/* ~~ Div/tag selectors ~~ */

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
	float: left;

    
}

/* ~~ Asume a low res cell phone ~~ */
@media screen and (max-width:414px){
	.splash-wrapper{background-image:url(../img/RWB-Back-cel.jpg)!important;height:400px!important;}
	.menu {display:none!important;}
	.navmenu-wrapper{display:none!important;} 
	.navmenu-links{display:none!important;}

	.splash-RWBlogo{height:150px!important;width:150px!important;bottom:100px!important;left:100px!important;}

	.img-matt img{padding-top:20px;margin: auto!important;}
	.char1{display:none !important;}
}

/* ~~ About the point the menu overwrites itself ~~ */
@media screen and (max-width:720px) and (min-width:415px){
	.splash-wrapper{background-image:url(../img/RWB-Back-tablet.jpg)!important;height:400px!important;}
	.menu {display:none!important;}
	.navmenu-wrapper{display:none!important;} 
	.navmenu-links{display:none!important;}  

	.splash-RWBlogo {height:180px!important;width:180px!important;bottom:100px!important;left:100px!important;}
	.img-matt img {padding-top:20px;margin: auto!important;}
	.char1{display:none !important;}
}

/* ~~ Assume a tablet ~~ */
@media (max-width:992px) and (min-width:721px){
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
	.img-matt img {margin-left:30px;}
	.fade img {margin-left:30px;}

	.char-cel{display:none !important;}
	.pens1{padding:0px!important;}
	.dropdown{display:none !important;}
}

/* ~~ Assume a desktop ~~ */
@media (min-width:993px){
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
	.img-matt img {margin-left:30px;}
	.fade img {margin-left:30px;}

	.char-cel{display:none !important;}
	.pens1{padding:0px!important;}
	.dropdown{display:none !important;}
}



.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
.w3-left{float:left!important}
.w3-right{float:right!important}
.w3-tiny{font-size:10px!important}
.w3-small{font-size:12px!important}
.w3-medium{font-size:15px!important}
.w3-large{font-size:18px!important}
.w3-xlarge{font-size:24px!important}
.w3-xxlarge{font-size:36px!important}
.w3-xxxlarge{font-size:48px!important}
.w3-jumbo{font-size:64px!important}
.w3-vertical{word-break:break-all;line-height:1;text-align:center;width:0.6em}
.w3-left-align{text-align:left!important}
.w3-right-align{text-align:right!important}
.w3-justify{text-align:justify!important}
.w3-center{text-align:center!important}
.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}
.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.w3-display-topmiddle{position:absolute;left:0;top:0;width:100%;text-align:center}
.w3-display-bottommiddle{position:absolute;left:0;bottom:0;width:100%;text-align:center}

/* Menu display for Tablet and Laptops */

.menu {
	display: block;
    color: white;
    text-align: center;  
    text-decoration: none;
	font-family: 'Merriweather', serif;
	font-weight:400;
	font-style:italic;
	font-size:20px;
}

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    
}

.menu li {
    float: left;
	margin-bottom: 7px;
    color: #ffffff;
	padding: 4px 8px;
}

.menu li:hover {
    background-color: #999;
}
.menu li a:link {
	color: #fff;
	text-decoration: none; 
}
.menu li a:visited {
	color: #fff;
	text-decoration: none;
}

/* Menu bar across the top of screen */

.navmenu-wrapper {
	height:60px;
	width:100%;
	position:fixed;
	left:0px;
	top:0px;
	z-index:2;
}
.navmenu-social {
	top:15px;
	width:120px;
	right:10px;
	position: fixed;
	height:30px;
	background: rgba(0,0,0,0);
	z-index:3;
	padding:2px;
}
.navmenu-links {
	top:15px;
	left:0px;
	width:100%;
	height:40px;
	position: fixed;
	z-index: 2;
	padding-left:50px;
	background: rgba(40,40,40,0.9);
	border-radius:2px;
}

/* Drop Down menu bar for cel phone screens */

.dropdown {
  position: fixed;
  display: inline-block;
  top:15px;
  left:15px;
  z-index:2;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1000;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #666;}

.show {display: block;}

/* Splash menu background */

.splash-wrapper {
	background-image:url(../img/RWB-Back-laptop.jpg);
	background-position:bottom left;
	background-size:auto;
	height:100%;
	width:100%;
	position: relative;
	top:0;
	left:0;

}

.splash-RWBlogo {
	height:220px;
	width:220px;
	position: absolute;
	background-image: url(../img/RWB-logo.png);
	background-position: bottom;
	background-repeat:no-repeat;
	background-size: contain;
	bottom:150px;
	left:150px;
	z-index:1;

}



.splash-ForSaleInfo {
	opacity:0.95;
	top:60px;
	width:70%;
	left:15%;
	position:relative;
}


.about-matt-wrapper {
	background-color:#5C3317;
	height:auto;
	width:100%;
	position:relative;
	padding:30px;
}

.about-matt-text {
	background-color:#FFF5EE;
	left:25px;
	top:65px;
	padding:30px;
	border:3px;
	border-style:solid;
	border-color:#222;
	border-radius:10px;
}

.Covid19-text {background-color:#FFeecc;
	left:25px;
	top:65px;
	padding:30px;
	border:3px;
	border-style:solid;
	border-color:#222;
	border-radius:10px;
}


.Covid19-text a:link {
	color: #00f;
	text-decoration: none;
}
.Covid19-text a:visited {
	color: #00f;
	text-decoration: none;
}

.img-matt img {
	display: block;
	max-width:500px;
	height:auto;
}

.charcuterie-wrapper {
	background-color:#FFF5EE;
	height:auto;
	width:100%;
	position:relative;
	padding:30px;
}

.charcuterie-text {
	background-color:#FFF5EE;

	float:left;
	
}

.pens-wrapper {
	background-color:#657383;  /* Complementary color #385970 */
	height:auto;
	width:100%;
	position:relative;
	padding:30px;
}

.pens1-text {
	background-color:#657383;
	top:25px;
	padding:30px;
	border:1px;
	border-style:solid;
	border-color:#FFF5EE;
	border-radius:10px;
	
}
.ornaments-wrapper {
	background-color:#FFF5EE;
	height:auto;
	width:100%;
	position:relative;
	padding:30px;
}
.ornaments-text {
	
	top:25px;
	padding:30px;
	border:1px;
	border-style:solid;
	border-color:#FFF5EE;
	border-radius:10px;
	
}
.bespoke-wrapper {
	background-color:#34282C;  /* Complementary color #27332F  */
	height:auto;
	width:100%;
	position:relative;
	padding:30px;
}
.bespoke-text {
	background-color:#FFF5EE;
	top:25px;
	padding:30px;
	border:1px;
	border-style:solid;
	border-color:#27332F;
	border-radius:10px;
	
}
/* Slideshow container */
.char-cel { /* for larger screens put the slideshow at the side */
	max-width:600px;
  	margin: auto;
 
  
}
.char1 { /* for larger screens put the slideshow at the side */
	max-width:600px;
  	margin: auto;
	padding-top:30px;
}

.pens1 { /* for larger screens put the slideshow at the side */
	max-width:600px;
  	margin: auto;
	padding-top:30px;
}
.pens2 { /* for larger screens put the slideshow at the side */
	max-width:600px;
  	margin: auto;
;
}

.ornaments1 { /* for larger screens put the slideshow at the side */
	max-width:600px;
  	margin: auto;
	padding-top:30px;
}

.bespoke { /* for larger screens put the slideshow at the side */
	max-width:600px;
  	margin: auto;
;
}