/* CSS Document */
<!--
.container-fluid{

margin-left:0px;
margin-right:0px;
width:100%;
height:100%;

}
.container{
height:100%;
}
.headerimg{
width:100%;
height:554px;
background-image:url(../images/header.jpg);
background-position:center;
background-repeat:no-repeat;
text-align:center;
}
.headerimg h1{
color:#FFFFFF;
font-weight:500;
padding-top:10%;
}
#texttopcontent{
width:100%;
margin-top:50px;
}
#texttopcontent h2{
text-align:center;
font-weight:700;

}
#texttopcontent p{
text-align:center;
font-size:1.5em;
margin:auto;
}
.findmore{
width:100%;
text-align:center;
padding-top:2em;
}
.findmore p{
line-height: .2em;
word-spacing:.2em;
font-size:3px;
color:#8AA4B7;
}
.findmore p span{
font-size:1.5em;
}
#under{
padding-right:40px;

}

.fom:link {
  color: #8AA4B7;
  text-decoration:none;
}
.fom:visited {
  color: #8AA4B7;
}

.fom:hover {
  text-decoration:none;
  cursor:pointer;
}

.fom:active {
  color: blue;
}
.about{
padding-top:5em;
font-size:.8em;
margin-bottom:3em;
}
.about p{
font-weight:bold;
}
.aboutcontainer{
width:100%;
display:flex;
margin-top:3em;

}
.containergrid{
width:100%;
display:flex;
}

figure {
	margin: 0;
	padding: 0;
}

img {
	max-width: 100%;
}


.thumbnail-grid ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
	
.thumbnail-grid li {
	margin-right: 1.33%;
	width: 24%;
}

.thumbnail-grid li:nth-child(4n) {
  margin-right: 0;
}

	
.thumbnail-grid li {
	width: 22%;
	list-style: none;
}
.thumbnail-grid li span{
font-weight:bold;
font-size:1.2em;

}

.thumbnail-grid .description {
	position: relative;
	padding-right: 25%;
	font-size:1em;
}

.thumbnail-grid .price {
    position: absolute;
    right: 0;
    top: 0;
	text-align: right;
	width: 25%;
}


.thumbnail-grid .thumbnail {
	position: relative;	/* Set the container for the images */
}

.thumbnail-grid img {
    display: block; /* Get rid of tiny space below images */
    margin-bottom: .3em;
	
}

/*.overlay {
	Set up the overlay text and background 
	background-color: rgba( 255, 0, 0, .5);
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 0;
	
	color: white;
	font-weight: bold;
	font-size: 200%;
	padding-top: 40%;
	text-align: center;
} */

.container-form{
width:100%;
height:650px;
margin-top:3em;
/*border: 1px solid red;*/
background-image:url("../images/Sunshine Tropical Fruit jackfruit.jpg");
background-position:center;
background-repeat:no-repeat;
background-size: 100% 100%;
text-align:center;
margin-left:0px;
margin-right:0px;

}
	
.container-form h2{
color:#FFFFFF;
padding-top:.8em;
font-weight:600;
padding-bottom:.8em;
}
.moreinfo{
width:60%;
height:57%;
background-color:#FFFFFF;
margin:auto;
text-align:center;
padding:2%;
}
#mi{
margin-top:auto;
margin-bottom:auto;
/*border: 1px solid red;*/
}
.phead{
font-size:1.5em;
font-weight:bold;
}
.ptxt{
font-size:1.4em;
}
.pname{
font-size:1.5em;
font-weight:bold;
line-height:3em;
}
.formbutton{
border:2px solid #000000;
width:30%;
vertical-align:middle;
margin-left:auto;
margin-right:auto;
vertical-align:middle;
padding:.5em;
cursor:pointer;

}
.formbutton p{
margin:auto;
letter-spacing:.2em;
}

.slideform{
display:none;
width:60%;
height:75%;
background-color:#FFFFFF;
margin:auto;
text-align:center;
padding:2%;
}
.mb-3 label{
float: left;
}
#xclose{
float:right;
cursor:pointer;
margin-top:1px;
font-weight:bold;
font-size:1.5em;
}
#dul{
font-size: 1.5em;
font-weight:bold;
}

.btn btn-primary{
float: right;
}

.check{
font-size:.7em;
display:none;
color:red;

width:33%;
float:right;
}

footer {
	border-top: 1px solid rgba(200,200,200,.5);
	padding: 1em 0;
	text-align:center;
	margin:auto;
	
}
footer div{
word-spacing:.3em;
letter-spacing:.5em;
}


/* Utility classes */
.alignright {
	float: right;
	margin-left: 1.5em;
}
.alignleft {
	float: left;
	margin-right: 1.5em;
}
@media only screen and ( max-width: 1200px) {
.thumbnail-grid li:nth-child(1n) {width:45%;}
.thumbnail-grid li:nth-child(1n) {width:45%;}
  .thumbnail-grid li:nth-child(3n){flex-wrap:wrap;}
  .thumbnail-grid li:nth-child(3n) {display:block;}
  .thumbnail-grid li:nth-child(3n) {width:45%;}
                        .formbutton{ width:45%}
}
@media only screen and ( max-width: 1000px) {
.formbutton{ width:50%}
.thumbnail-grid li{width:50%;}
.thumbnail-grid li{width:50%;}
}
@media only screen and ( max-width: 600px) {
.formbutton{ width:60%}
.thumbnail-grid li{margin:auto;}
.thumbnail-grid li:nth-child(1n) {margin-right:8%; width: 100%;}
.moreinfo{width:80%;}
.slideform{display:none; width:80%;}
.pname{line-height:1em;}
.formbutton{ width:65%;}
.check{width:50%;}
footer div{
word-spacing:.2em;
letter-spacing:.2em;
}
}