html, body {
 	background: url(../images/bg.jpg);
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color:#000000;
}

a:link,a:visited {
	color: #feecbc;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	}

a:hover, a:active {
	color: #336633;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	}

h1{
	color:#000000;
	font-size: 20px;
	font-family: 'Open Sans', sans-serif;
}

h2{
	color:#000000;
	font-size: 16px;
	font-family: 'Open Sans', sans-serif;
}

p {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	}

#container {
	max-width: 1024px;
	margin:0 auto;
	position:relative;
	background-color:#feecbc;
	padding: 0;
	border:1px solid #5b5c60;
}

#hamburger {
    display: none;
}

#hamburger button {
    position:absolute;
    border:none;
    height:35px;
    width:50px;
    background:0 0;
    top:7px;
    right:15px;
    outline:0
  }
  button#nav-toggle span {
    position:absolute;
    display:block;
    margin:auto;
    width:30px;
    top:8px;
    left:8px;
    height:3px;
    background:#000
  }
  #nav-toggle span:nth-child(2) {
    top:16px
  }
  #nav-toggle span:nth-child(3) {
    top:25px
  }

#menuOuter {
	height: 20px;
	background: #bc6900;
	padding-top:20px;
}

@-moz-document url-prefix() {
    #menuOuter {
        padding-top:0px;
    }
}

.table {
	display: table;
	margin: 0 auto;
	text-align:center;
}

ul#mainNav {
	width:800px;
	height:20px;
	list-style: none;
	margin: 0 auto;
  /*padding-top: 15px;*/
}

ul#mainNav li {
	display: inline;
	margin-top:20px;
	margin-right:50px;
}

#active a {
	color: #336633;
	font-family: 'Open Sans', sans-serif;;
	font-size: 14px;
	font-weight: bold;
	text-decoration: underline;

}

#mainNavMobile {
  margin: 0;
  height: 100vh;
  background-color: lightgrey;
  list-style: none;
  position: fixed;
  top:0;
  right: -999px;
  bottom: 0;
  width: 45%;
  opacity: 0.95;
  padding: 1rem 2rem 2rem 2rem;
  text-align: right;
  transition: all .3s ease;
}
#mainNavMobile a {
  color: black;
  font-size: 1.25rem;
}
#mainNavMobile #active a {
  color: blue;
}
#mainNavMobile li:last-child {
  margin-top: 25px;
  font-style: italic;
  font-weight: bold;
}
#mainNavMobile li {
  padding: .5rem 0;
}

.logo {
	float: left;
	margin: 15px 0 0 42px;
}

.homeContent {
	background: url('../images/background.jpg') #feecbc no-repeat;
	max-width:1024px;
	height:274px;
	margin:0px;
	padding: 0;
}

.homeCopy {
	clear:both;
	max-width:944;
	margin:0px;
	padding:0px 40px 40px 40px;
	text-align:left;
	background-color:#feecbc
}

.homeCopy iframe {
    min-width: unset !important;
}

.intContentMalts {
	background: url('../images/background-intMalts.jpg') #feecbc no-repeat;
	width:1024px;
	height:274px;
	margin:0px;
	padding: 0;
	max-width: 100%;
}

.intContentTeam {
	background: url('../images/background-intTeam.jpg') #feecbc no-repeat;
	width:1024px;
	height:274px;
	margin:0px;
	padding: 0;
}

.intContentTerroir {
	background: url('../images/background-intTerroir.jpg') #feecbc no-repeat;
	width:1024px;
	height:274px;
	margin:0px;
	padding: 0;
	max-width: 100%;
}

.intContentNewsEvents {
	background: url('../images/background-intNews-Events.jpg') #feecbc no-repeat;
	width:1024px;
	height:274px;
	margin:0px;
	padding: 0;
}

.intContentContact {
	background: url('../images/background-intContact.jpg') #feecbc no-repeat;
	width:1024px;
	height:274px;
	margin:0px;
	padding: 0;
	max-width: 100%;
}

.intCopy {
    box-sizing: border-box;
	clear:both;
	width:944;
	margin:0px;
	padding:20px 40px 40px 40px;
	text-align:left;
	background-color:#feecbc;
	max-width: 100%;
}

div#footer {
	clear:both;
	width:100%;
	height:80px;
	background-color:#165717;
}

.footerTag {
	text-align:right;
	color:#FFFFFF;
}

/* FORMS */
.form td {
	padding-bottom: 5px;
}

.form input.submit {
	cursor: pointer;
	padding: 10px 40px;
}

/* Request Form */
.request-form label {
	font-weight: bold;
}

.request-form input[type=text]  {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}

.request-form textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    margin: 8px 0;
    resize: none;
}

.request-form input[type=button], .request-form input[type=submit], .request-form input[type=reset] {
    background-color: #924100;
    border: none;
    color: white;
    padding: 16px 32px;
    font-size: 1.1em;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

.required, .error {
	color: #ff0000;
}

.alert {
	position: relative;
	padding: .75rem 1.25rem;
	margin-bottom: 1rem;
	border: 1px solid transparent;
	border-radius: .25rem;
}

.alert-danger {
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c6cb;
}

.alert-success {
	color: #155724;
	background-color: #d4edda;
	border-color: #c3e6cb;
}


/* THUMBNAIL GALLERY */
div.thumbGallery {width: 408px; margin: 0; position: relative}
div.thumbGallery a.prev { display: block; background: none; top: 40% !important; right: -32px !important; border: solid black; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; transform: rotate(135deg); -webkit-transform: rotate(135deg); width: 23px; height: 23px; color: transparent !important; position: absolute; top: 0; outline: none; }
div.thumbGallery a.next { display: block; background: none; top: 40% !important; right: -40px !important; border: solid black; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); width: 23px; height: 23px; color: transparent !important; position: absolute; top: 0; outline: none; }


div.thumbGallery div.thumbs {}
div.thumbGallery div.thumbs img {width: 100px; height: 100px; cursor: pointer; border: 1px solid #000000; float: left}
div#cboxTitle{position: absolute; bottom: 25px; left: 25%; text-align: left; width: 50%; color: #FFFFFF; padding: 10px; font-size: .9em; background-color: #000000; opacity: 0.6}


@media only screen and (max-width: 40em) {
    
    .flex-mobile {
        display: flex;
    }
    .flex-column-mobile {
        flex-direction: column;
    }
    
    img {
        max-width: 100%;
        margin: .25rem;
    }
    
    #hamburger {
        float: right;
        display: block;
    }
    #mainNav {
        display: none;
    }
    #mainNavMobile.on {
        right: 0;
    }
    
	/* Force table to not be like tables anymore */
	.maltTable table, .maltTable thead, .maltTable tbody, .maltTable th, .maltTable td, .maltTable tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
    .maltTable th { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
    .maltTable tr { border: 0px solid ; }
	
	.maltTable td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid ; 
		position: relative;
		padding-left: 50%; 
	}
	
	.maltTable td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
        font-size: 14px;
	}
	
	/*
	Label the data
	*/
	.maltTable td:nth-of-type(1):before { content: "Malt"; font-weight: bold;}
	.maltTable td:nth-of-type(2):before { content: "Description"; font-weight: bold; }
	.maltTable td:nth-of-type(3):before { content: "Color"; font-weight: bold; }
  
  
    .inst {
        margin: 0 !important;
    }
    
    .footerTag {
        display: none;
    }
}