/* ************************************************************
           extra small devices (phones, 600px or less)
   ************************************************************ */


/* this ensures that padding and border are included in the total width and height of the element*/
* {
	box-sizing: border-box;
}

@font-face {
	font-family: Retroking;
	src: url('fonts/retroking/Retroking.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}


@font-face {
	font-family: Manjari-Bold;
	src: url('fonts/manjari-2/Manjari-Bold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: Manjari-Regular;
	src: url('fonts/manjari-2/Manjari-Regular.ttf');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: Vintage;
	src: url('fonts/Vintage/Vintage.ttf');
	font-weight: normal;
	font-style: normal;
}


@media only screen and (min-width: 601px), (max-width: 991px) {
			body {
			margin: 0px;
			font-family: Manjari-Regular;
			background-color: #FFF7D6; /* light cream milk paint */
			max-width: 100vw;
		}
}


/*========================================*/
/* HEADER SECTION - TITLE, CONTACT & NAV */
/*========================================*/
@media only screen and (min-width: 601px), (max-width: 991px) {
			.head_container {
			display: flex;
			flex-direction: column;
			min-width: 100%;
			height: 10%;
			background-color: #81965D; /* tavern green milk paint */
			overflow: hidden;
			justify-content: center;
			align-items: center;
			filter: drop-shadow(0px 8px 5px #666666);
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
		.head_container a {
			text-decoration: none;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.head_container h1 {
			font-family: Retroking;
			src: url('fonts/retroking/Retroking.ttf') format('truetype');
			font-size: 3em;
			color: white;
			text-align: center;
			text-shadow: 0.75px 0.75px 3px #666666;
			margin-top: 25px;
			margin-bottom: 0;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.head_container p {
			font-family: Manjari-Regular;
			src: url('fonts/manjari-2/Manjari-Regular.ttf');
			font-size: 1.6em;
			color: white;
			text-align: center;
			margin-top: 0;
			margin-bottom: 20px;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.click_here {
			position: absolute;
			top: 19%;
			left:62%;
			z-index: 100;
  		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.click_here img {
			height: 60px;
			width: auto;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.sub_container {
			display: flex;
			flex-direction: row;
			min-width: 100%;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.empty {
			display: flex;
			width: 30%;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.contact {
			display: flex;
			flex-direction: row;
			width: 70%;
			padding-left: 30%;
			align-items: center;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.contact > h3 {
			font-size: 1.1em;
			color: white;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.contact > a {
			text-decoration: none;
			font-size: 1em;
			color: white;
			padding: 22px 0px 0px 0px;
			align-items: center;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.contact > img {
			height: 16px;
			width: auto;
			margin: 0px 5px 2px 5px;
		}
}


@media only screen and (min-width: 601px), (max-width: 991px) {
			.contact p {
			color: white;
			font-size: 1.35em;
		}
}


/*-----------------------------------
           hamburger menu
  -----------------------------------*/
@media only screen and (min-width: 601px), (max-width: 991px) {
			.hamburger, .close {
  		     border: none;
  			 cursor: pointer;
 	 		 /* position absolute position the icons relative to the body because they have no position relative parents*/
  			 position: absolute;
  			 top: 120px;
			 left: 20px;
  			 width: 30px;
  			 height: 30px;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.hamburger {
  			 background: none;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {.close {
  			background: #191011; /* pitch black milk paint */
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.hamburger img, .close img {
 			width: 100%;
  			height: 100%;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.navbar {
  			position: absolute;
  			/* a higher z-index put navbar above hamburger */
  			z-index: 1000;
  			top: 0;
  			left: 0;
  			width: 100%;
  			height: 25vh;
  			overflow: hidden;
  			/* basic menu styling*/
  			list-style: none;
  			background: #191011; /* pitch black milk paint */
  			display: flex;
  			flex-flow: column nowrap;
  			justify-content: space-evenly;
  			align-items: center;
  			/* animate slide up/down */
  			transform: translateY(-110%);
  			transition: transform 0.3s ease;
		}
}

/* :target is called when its anchor id #navbar is called by clicking on the hamburger which has href="#navbar" */
@media only screen and (min-width: 601px), (max-width: 991px) {
			.navbar:target {
  			/* show navbar */
  			transform: translateY(0);
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			li a {
  			display: block;
  			font-family: Manjari-Regular;
			src: url('fonts/manjari-2/Manjari-Regular.ttf');
  			color: white;
  			font-weight: bold;
  			font-size: .8rem;
  			/* remove default underline and add our own with padding and border bottom */
  			text-decoration: none;
  			border-bottom: 1px solid black;
  			padding-bottom: 0.5rem;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			li a:hover, li a:focus {
  			/* show border bottom */
  			border-bottom: 1px solid white;
		}
}


/*========================================*/
/*        ROW4 = MAIN BODY CONTENT        */
/*========================================*/
@media only screen and (min-width: 601px), (max-width: 991px) {
			.row4 {
			width: 80%;
			margin: auto;
			min-height: 80vh;
			padding: 7px 5px 7px 5px;
			background-color: #FFF7D6; /* light cream milk paint */
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.row4 p {
			font-size: 1.2em;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.row4 h1 {
			font-size: 1.85em;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.row4 a {
			text-decoration: none;
		}
}

/*-----------------------------------
    where the cards are displayed
  -----------------------------------*/
@media only screen and (min-width: 601px), (max-width: 991px) {
			.flex_container {
			display: flex;
			flex-flow: row wrap;
			height: auto;
			background-color: #FFF7D6;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.flex_container div {
			width: 95px;
			height: 170px;
			justify-items: center;
			border: solid 5px white;
			border-radius: 8px;
			filter: drop-shadow(1px 1px 2px #666666);
			background-color: #FFF7D6;
			margin: 6px;
			overflow: hidden;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.portrait_flex_item img {
			min-width: 100%;
			max-height: 100%;
			object-fit: cover;
			margin: auto;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.landscape_flex_item img {
			max-width: 100%;
			min-height: 100%;
			object-fit: cover;
			margin: 0;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.product_title {
			font-family: Manjari-Bold;
			display: flex;
			margin: none;
			padding: 30px;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.strong {
			font-size: 1em;
			font-weight: 600;
			font-style: oblique;
		}
}


/*-----------------------------------
            product pages
  -----------------------------------*/
@media only screen and (min-width: 601px), (max-width: 991px) {
			.description_title h1 {
			font-size: 1.25em;
			color: #191011; /* pitch black milk paint */
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.product_description p {
			font-size: 1em;
			color: #191011; /* pitch black milk paint */
		}
}

/* --price-- */
@media only screen and (min-width: 601px), (max-width: 991px) {
			.product_description h2 {
			font-size: 1.25em;
			color: #191011; /* pitch black milk paint */
		}
}

/* --payment options-- */
@media only screen and (min-width: 601px), (max-width: 991px) {
			.product_description a {
			font-size: 1em;
			text-decoration: none;
			font-weight: 600;
			color: green;
		}
}


/*=========================================== 
            -- domain sale form --
  ===========================================*/
@media only screen and (min-width: 601px), (max-width: 991px) {
			.form_container {
			justify-content: center;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			form {
			border-radius: 5px;
			background-color: #f5e5bd; /* buttermilk milk paint */
			padding: 20px;
			width: 100%;
			margin: 40px 0px 40px 0px;
			filter: drop-shadow(2px 2px 4px #666666);
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.description_title {
			font-size: 1em;
			color: #191011; /* pitch black milk paint */
   		}
 }

@media only screen and (min-width: 601px), (max-width: 991px) {
			label {
			display: flex;
			font-size: 1.25em;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			input[type=text], select {
			width: 100%;
			padding: 12px;
			margin: 8px 0;
			display: flex;
			border: 1px solid #ccc;
			background-color: #FFF7D6; /* light cream milk paint */
			border-radius: 5px;
			box-sizing: border-box;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			input[type=email], select {
			width: 100%;
			padding: 12px;
			margin: 8px 0;
			display: flex;
			border: 1px solid #ccc;
			background-color: #FFF7D6; /* light cream milk paint */
			border-radius: 5px;
			box-sizing: border-box;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			input[type=currency], select {
			width: 100%;
			padding: 12px;
			margin: 8px 0;
			display: flex;
			border: 1px solid #ccc;
			background-color: #FFF7D6; /* light cream milk paint */
			border-radius: 5px;
			box-sizing: border-box;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			input[type=submit] {
			width: 100%;
			background-color: #81965D;
			color: white;
			padding: 14px;
			margin: 8px 0;
			border: none;
			border-radius: 5px;
		}
}	

@media only screen and (min-width: 601px), (max-width: 991px) {
			input {
			font-size: 1.25em;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			input[type=submit]:hover {
  			background-color: #525C39; /* lexington green milk paint */
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			img.CoA {
			margin: auto;
		}
}


/*=========================================== 
  begin responsive CSS rollover photo gallery 
  ===========================================*/
/* colors and borders */
@media only screen and (min-width: 601px), (max-width: 991px) {
	.pic_gallery {border-radius:25px;} /* gallery border color */
	.pic_gallery .pic_sm div { } /* thumbnail cell border */
	.pic_gallery .pic_lg div { } /* main photo cell border */
	.pic_gallery .pic_sm img { } /* thumbnail border */
	.pic_gallery .pic_lg img { } /* main photo border */
	.pic_gallery .pic_set:hover .pic_sm div { color: #f5e5bd; } /* thumbnail border hover color */
	.pic_gallery { background-color: #f5e5bd;} /* gallery background color */
	.pic_gallery .pic_sm div, 
	.pic_gallery .pic_lg div {background-color: #f5e5bd; } /* cell background color */
	.pic_gallery .pic_head,
	.pic_gallery .pic_foot {color:#333333;} /* gallery text color */
}

/* text */
@media only screen and (min-width: 601px), (max-width: 991px) {
	.pic_gallery { font-family:manjari-Regular; font-size:16px; }
	.pic_gallery .pic_head { display:none; text-align:center; font-size:.88em; font-weight:bold; padding-top:.5em; }
	.pic_gallery .pic_foot { display:none; text-align:center; font-size:.7em;  }
}

/* shadows and corners */
@media only screen and (min-width: 601px), (max-width: 991px) {
	.pic_gallery .pic_sm {  }
	.pic_gallery .pic_lg {  }
	.pic_gallery .pic_sm div {  } /* cell corners and shadows */
	.pic_gallery .pic_lg div {  } /* cell corners and shadows */
	.pic_gallery .pic_sm img {border-radius: 15px; border: solid 3px white;} /* image corners and shadows */
	.pic_gallery .pic_lg img {border-radius: 15px; } /* image corners and shadows */
}

/* sizing, matting, and margins (all values interact and vary by aspect ratio and image count) */
@media only screen and (min-width: 601px), (max-width: 991px) {
	.pic_gallery { width: max-width: 100%; } /* change this % in media queries */
	.pic_gallery .pic_gal_6x2 { width: 100%; padding-top:75.47%; }
	.pic_gallery .pic_gal_6x2 .pic_gal_cells { width:98.08%; height:97.46%; } /* sets padding around entire gallery */
	.pic_gallery .pic_gal_6x2 .pic_sm { width:11.71%; height:15.62%; margin:0.39%; }
	.pic_gallery .pic_gal_6x2 .pic_lg { width:74.21%; height:98.95%; margin:0.39%; }
	.pic_gallery .pic_gal_6x2 .pic_sm img { max-width:83.33%; max-height:83.33%; } /* sets margin around thumbnail */
	.pic_gallery .pic_gal_6x2 .pic_lg img { max-width:97.36%; max-height:97.36%; } /* sets margin around large photo */
}

/* structural */
@media only screen and (min-width: 601px), (max-width: 991px) {
	.pic_gallery, .pic_gallery * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
	.pic_gallery, .pic_gallery .pic_gal { position:relative; margin:auto; }
	.pic_gallery .pic_gal_cells { position:absolute; left:0; top:0; bottom:0; right:0; margin:auto; }
	.pic_gallery img { position:absolute; width:auto; height:auto; left:0; top:0; bottom:0; right:0; margin:auto; }
	.pic_gallery .pic_sm { position:relative; overflow:hidden; float:left; display:block; }
	.pic_gallery .pic_lg { position:absolute; overflow:hidden; display:none; left:0%; top:0%; z-index:1; }
	.pic_gallery .pic_sm div, 
	.pic_gallery .pic_lg div { position:absolute; left:0%; top:0%; right:0%; bottom:0%; }
	.pic_gallery .pic_lg { display:none; }
	.pic_gallery .pic_lg.pic_main { position:relative; display:block; float:left; z-index:0; } /* turn on default large photo */
	.pic_gallery .pic_set:hover .pic_sm div { opacity:.5; border:1px solid; }
	.pic_gallery .pic_set:hover .pic_lg { display:block; left:0%; top:0%; }
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.product_description {
			max-width: 95%;
			height: auto;
			margin: 30px;
			font-family: Manjari-Regular;
		}
}


/*========================================
          -- St Swithun's page --
  ========================================*/
@media only screen and (min-width: 601px), (max-width: 991px) {
			.st_swithuns {
			display: flex-wrap;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
	 		.st_swithuns > video {
 			width: 400px;
 			height: auto;
 			margin: auto;
 		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.content {
			margin-top: 30px;
		}
}


@media only screen and (min-width: 601px), (max-width: 991px) {
			.st_swithuns p { 
 			font-size: 1em;
 		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
 			.st_swithuns h1 { 
 			font-size: 1.5em;
 		}
}


/*========================================
           ROW5 = FOOTER - TITLE 
  ========================================*/
@media only screen and (min-width: 601px), (max-width: 991px) {
			.row5 {
			display: flex;
			max-width: 100%;
			background-color: #191011; /* pitch black milk paint */
			justify-content: center;
			align-items: center; 
			padding: 10px;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			a {
			text-decoration: none;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.row5 h1 {
			font-family: Retroking;
			src: url('fonts/retroking/Retroking.ttf') format('truetype');
			font-size: 2.25em;
			color: white;
			align-items: flex-start;
			margin: 10;
		}
}


/*========================================
    ROW6 = FOOTER - CONTACT INFORMATION 
  ========================================*/
@media only screen and (min-width: 601px), (max-width: 991px) {
			.row6 {
			display: flex;
			flex-direction: space-around;
			min-width: 100%;
			background-color: #191011; /* pitch black milk paint */
			align-items: center;
			justify-content: center;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.row6 h3 {
			font-size: 1.35em;
			margin-right: 10px;
			color: white;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.row6 img {
			max-width: 40px;
			max-height: 40px;
			padding: 0px 10px 0px 0px;
		}
}	

@media only screen and (min-width: 601px), (max-width: 991px) {
			.row6 a {
			text-decoration: none;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.row6 p {
			color: white;
			font-size: 1.35em;
		}
}


/*========================================
  ROW7 = FOOTER - WEB DESIGN INFORMATION 
  ========================================*/
@media only screen and (min-width: 601px), (max-width: 991px) {
		.row7 {
			display: flex;
			max-width: 100%;
			background-color: #191011; /* pitch black milk paint */
			justify-content: center;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.row7 p {
			font-size: 1.35em;
			color: white;
			margin-left: auto;
		}
}


/*========================================
   ROW8 = FOOTER - COPYRIGHT INFORMATION 
  ========================================*/
@media only screen and (min-width: 601px), (max-width: 991px) {
			.row8 {
			display: flex;
			max-width: 100%;
			background-color: #191011; /* pitch black milk paint */
			justify-content: center;
			align-items: center;
		}
}

@media only screen and (min-width: 601px), (max-width: 991px) {
			.row8 p {
			font-size: 1.35em;
			color: white;
			margin: auto;
		}
}