/*<!-- Structure -->*/
* {
	box-sizing: border-box;
	/*font-family: Jura;*/
	font-family: eurostile, Jura;
	/*font-family: 'Open Sans', sans-serif;*/
}

html, body
{
	position:relative;
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	overflow:auto;
	background-image: url("../images/freshproduce-wide.jpg");
    background-repeat: no-repeat;
    background-position: top;
    background-attachment: fixed;
    background-size:100%;
    min-height: 100%;
    font-size: 20px;
    /*opacity: 1;*/
    /*display:none;*/
}
#container {
   min-height:100%;
   position:relative;
   overflow:hidden;

}

#body
{
    /*margin: 0 0 150px;  bottom = footer height */
    /*overflow:hidden;*/
    
}

.row
{
    overflow:visible;
    height:auto;
}

.row::after 
{
  content: '';
  clear: both;
  display: table;
  width:80%;
}

.col-05 {width: 5%;float: left;}
.col-10 {width: 10%;float: left;}
.col-15 {width: 15%;float: left;}
.col-20 {width: 20%;float: left;}
.col-30 {width: 30%;float: left;}
.col-40 {width: 40%;float: left;}
.col-50 {width: 50%;float: left;}
.col-60 {width: 60%;float: left;}
.col-70 {width: 70%;float: left;}
.col-80 {width: 80%;float: left;}
.col-90 {width: 90%;float: left;}
.col-100 {width: 100%;float: left;}

.filmstrip 
{
	width: 12.5%;
	float: left;
	opacity: 1;

}

.filmstrip > img
{
	min-width: 90%;
	max-width: 90%;
	/*max-height:200px;*/
	overflow:hidden;

}

#full-image img
{
	max-width:100%;
	max-height:70vh;
	margin-left:auto;
	margin-right:auto;
	display:block;
}

#image-title
{
	text-align: center;
}


/*<!-- banner -->*/
#banner
{
	position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: #012e57;
    border-radius:2px;
    border: 2px solid #012e57;
    z-index:1;
    display:none;
}

#banner h2
{
	color:#01a7d9;
	text-align:center;
	margin:5px;
	font-weight: normal;
}

/*navigation*/
#nav-container-1, #nav-container-2
{
	width:80%;
	display:inline-block;
	position: relative;
	/*height:150px;*/
	margin-top:15px;
	float:right;
}

#nav-container-2
{
    float:left;
    display:none;
}

#nav-btn
{
	display:none;
}

.nav
{
	float:right;
	width:70%;
	height:100%;

}

.nav-1
{
	float:right;
	/*width:25%;*/
	display: block;
}

.nav-btn-1
{
	text-align:center;
	width:100%;
	/*background-color:#012e57;*/
	background-color:white;
	border:none;
	padding:16px 16px;
	color: black;
	font-size:large;
	margin:auto;
	color:#01a7d9;
	/*display: inline-block;*/
	float:right;
}
.nav-btn-1:focus {
    outline: 0;
}

.nav-btn-1:hover, .nav-btn-1:active
{
	/*background-color:#01a7d9;*/
	color:#012e57;
}

#nav
{
    font-weight: 400;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    margin-left: 0;
    margin: 0;
    text-decoration: none;
    padding: 0;
    text-align: justify;
    z-index: 1;
    /*background-color: #8587fe;*/
    display: inline-block;
    float:right;
}


/*<!-- header -->*/

#header
{
	height:135px;
	background-color:white;
	position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    z-index:1;
}

#logo-text
{
	position:relative;
	float:left;
	/*margin-left:25%;*/
	object-fit: contain;
	width:12%;

}

#logo-text img
{
	width:100%;
	margin-top:2.5%;
    margin-left:12.5%;
    float:left;
    max-height: 130px;
    max-width: 240px;
}

#logo-text p
{
	text-align:center;
	font-weight: bold;
	color: #012e57;
	padding:5px 0 0 0;
	margin:0;
}

#logo
{
	float:left;
	padding-left:5%;
	padding-right:5%;
	padding-top:0px;
}

#logo img
{
	float:left;
	width:25%;
	position:relative;
}


/*<!-- body -->*/
#body
{
    overflow:auto;
    /*padding:10px;*/
    padding-bottom:150px;
    /*padding-top:135px;  */
    /*Height of the footer */
    position: relative;
}

#bodycontent
{
	background-color: rgba(0,0,0,0.9);
	/*min-height:100%;*/
}

#bodycontent-text
{
	opacity: 1;
	color:#74CFE1;
	text-align:left;
	padding:0 5%;
	margin-bottom: 30px;
	border-radius: 5px
	border: 5px solid black;
}

#bodycontent-text h1
{
	font-size: 25px;
	color:#E1E4E5;
	text-align: center;
}

#bodycontent-text h2
{
	font-size: 20px;
	color:#E1E4E5;
}

#bodycontent-text a
{
	cursor:pointer;
	color:white;
	/*font-weight:bold;*/
	text-decoration:underline;
}

#bodycontent-text  div > img
{
	width:100%;
	height:100%;
	display: block;
    margin-left: auto;
    margin-right: auto;
    image-orientation: from-image;

}

#bodycontent-text  div > h2
{
	text-align:center;
  	padding: 10px 10px;
  	font-weight:normal;

}

#bodycontent-text .polaroid
{
	width:23%;
	float:left;
	background-color: rgba(0,0,0, 0.9);
  	box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  	margin-bottom: 25px;
  	margin-left:1%;
  	margin-right:1%;
  	margin-top:auto;
  	height:100%;
}
.polaroid > .polaroid
{
  	margin-left:1%;
  	margin-right:1%;
}


/*<!-- footer -->*/
  
#footer 
{
	text-align:center;
	position:absolute;
	bottom:0;
	width:100%;
	height:150px;   /* Height of the footer */
	color: #01a7d9;
    background-color: white;
    overflow:hidden;
    /*padding: 1rem;*/
}

#footer > span
{
	color:#012e57;
	font-weight: bold;
}

#footer > a
{
	color:#01a7d9;
	font-weight: bold;
	text-decoration: none;
}