/* ************************************************************
           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 (max-width: 600px) {
		body {
			margin: 0px;
			font-family: Manjari-Regular;
			background-color: #d4d4d2; /* mercantile milk paint */
			max-width: 100vw;
		}
}


/*==============================
         HEADER SECTION
  ==============================*/
@media only screen and (max-width: 600px) {
		.head_container {
			display: flex;
			flex-direction: column;
			min-width: 100%;
			height: 10%;
			background-image: linear-gradient(to bottom, #11224b, #254ba6);
			overflow: hidden;
			justify-content: center;
			align-items: center;
			filter: drop-shadow(0px 8px 5px #666666);
		}
}

@media only screen and (max-width: 600px) {
		.head_container img {
			width: 250px;
			height: auto;
		}
}

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

@media only screen and (max-width: 600px) {
		.click_here {
			position: absolute;
			top: 8%;
			left:68%;
			z-index: 100;
  	}
}

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


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

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

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

@media only screen and (max-width: 600px) {
		.contact > h3 {
			font-size: 0.8em;
			color: white;
		}
}

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

@media only screen and (max-width: 600px) {
		.contact > img {
			height: 12px;
			width: auto;
			margin: 0px 5px 2px 5px;
		}
}

@media only screen and (max-width: 600px) {
		.contact p {
			color: white;
			font-size: 1.15em;
		}
}


/*-----------------------------------
           hamburger menu
  -----------------------------------*/
@media only screen and (max-width: 600px) {
		.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: 125px;
			left: 10px;
  		width: 30px;
  		height: 30px;
		}
}

@media only screen and (max-width: 600px) {
		.hamburger {
  		background: none;
		}
}

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

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

@media only screen and (max-width: 600px) {
		.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 (max-width: 600px) {
	.navbar:target {
  		/* show navbar */
  		transform: translateY(0);
		}
}

@media only screen and (max-width: 600px) {
		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 (max-width: 600px) {
		li a:hover, li a:focus {
  		/* show border bottom */
  		border-bottom: 1px solid white;
		}
}


/*==============================
           ROW4 ITEMS           
  ==============================*/
@media only screen and (max-width: 600px) {
	.row4 {
		width: 96%;
		margin: auto;
		min-height: 80vh;
		padding: 7px 5px 7px 5px;
		background-color: #d4d4d2; /* mercantile milk paint */
		}
}

@media only screen and (max-width: 600px) {
	.row4 p {
		font-size: 1em;
		}
}

@media only screen and (max-width: 600px) {
	.row4 h1 {
		font-size: 1.5em;
		}
}

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

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

@media only screen and (max-width: 600px) {
	.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 (max-width: 600px) {
	.portrait_flex_item img {
			min-width: 100%;
			max-height: 100%;
			object-fit: cover;
			margin: auto;
		}
}

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

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

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



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

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

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

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


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

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

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

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

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

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

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

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

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

@media only screen and (max-width: 600px) {
		input[type=submit]:hover {
  		background-color: #2a5178; /* soldier blue milk paint */
		}
}

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


/*=========================================== 
  begin responsive CSS rollover photo gallery 
  ===========================================*/

/* colors and borders */
@media only screen and (max-width: 600px) {
.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 (max-width: 600px) {
.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 (max-width: 600px) {
.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 (max-width: 600px) {
.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 (max-width: 600px) {
.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 (max-width: 600px) {
		.product_description {
			max-width: 95%;
			height: auto;
			margin: 30px;
			font-family: Manjari-Regular;
		}
}

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

@media only screen and (max-width: 600px) {
		.bold {
			font-weight: 700;
		}
}

@media only screen and (max-width: 600px) {
		.product_description h2 {
			font-size: 1.75em;
		}
}

@media only screen and (max-width: 600px) {
		.product_description a h1 {
			text-decoration: none;
			font-weight: 800;
			color: green;
		}
}


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

@media only screen and (max-width: 600px) {
 .st_swithuns > video {
 		width: 350px;
 		height: auto;
 		margin: auto;
 		}
}

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


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

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


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

@media only screen and (max-width: 600px) {
		.row5 img {
			width: 150px;
			height: auto;
			margin-left: 65%;
		}
}


/*========================================
    ROW6 = FOOTER - CONTACT INFORMATION 
  ========================================*/
@media only screen and (max-width: 600px) {
		.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 (max-width: 600px) {
		.row6 h3 {
			font-size: 1.15em;
			margin-right: 10px;
			color: white;
		}
}

@media only screen and (max-width: 600px) {
		.row6 img {
			max-width: 32px;
			max-height: 32px;
			padding: 0px 5px 0px 0px;
		}
}	

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

@media only screen and (max-width: 600px) {
		.row6 p {
			color: white;
			font-size: 1.25em;
		}
}

/*========================================
  ROW7 = FOOTER - WEB DESIGN INFORMATION 
  ========================================*/
@media only screen and (max-width: 600px) {
		.row7 {
			display: flex;
			max-width: 100%;
			background-color: #191011;
			justify-content: center;

		}
}

@media only screen and (max-width: 600px) {
		.row7 p {
			font-size: 1em;
			color: white;
			margin-left: auto;
		}
}


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

@media only screen and (max-width: 600px) {
		.row8 p {
			font-size: 1em;
			color: white;
			margin: auto;
		}
}





/* small devices (tablets and large phones, 600px and up) */
@media only screen and (min-width: 601px) {

}


/* medium devives (tablets, 768px and up) */
@media only screen and (min-width: 768px) {

}


/* large devices (laptops or desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}


/* extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}