/* ************************************************************
         large devices (laptops or desktops, 992px and up)
   ************************************************************ */




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

html {
	font-size:12px; /* sets the root font size for the whole web page */
}

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


/*==============================
         HEADER SECTION
  ==============================*/
@media only screen and (min-width: 992px) {
		.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 (min-width: 992px) {
		.head_container a {
			text-decoration: none;
		}
}

@media only screen and (min-width: 992px) {
		.head_container h1 {
			font-family: Retroking;
			src: url('fonts/retroking/Retroking.ttf') format('truetype');
			font-size: 5em;
			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: 992px) {
		.head_container p {
			font-family: Manjari-Regular;
			src: url('fonts/manjari-2/Manjari-Regular.ttf');
			font-size: 2.5em;
			color: white;
			text-align: center;
			margin-top: 0;
		}
}


@media only screen and (min-width: 992px) {
		.click_here {
			position: absolute;
			top: 25%;
			left:60%;
			z-index: 100;
		}
}

@media only screen and (min-width: 992px) {
		.click_here img {
			height: 150px;
			width: auto;
		}	
}	

@media only screen and (min-width: 992px) {
		.sub_container {
			display: flex;
			flex-direction: row;
			min-width: 100%;
			justify-content: space-around;
		}
}

@media only screen and (min-width: 992px) {
		.close, .hamburger img {
			display: none;
		}
}

@media only screen and (min-width: 992px) {
		.navigation {
			width: 60%;
		}
}

@media only screen and (min-width: 992px) {
		.navigation {
			font-family: Manjari-Regular;
			src: url('fonts/manjari-2/Manjari-Regular.ttf');
			font-size: 2em;
			align-items: center;
		}
}

@media only screen and (min-width: 992px) {
		.navigation ul {
			  list-style-type: none;
  			overflow: hidden;
  			background-color: none; 
		}
}

@media only screen and (min-width: 992px) {
		.navigation ul li {
				float: left;
		}
}

@media only screen and (min-width: 992px) {
		.navigation ul li a {
			  display: block;
  			color: white;
  			text-align: center;
  			padding: 14px 16px;
  			text-decoration: none;
		}
}

@media only screen and (min-width: 992px) {
		.navigation ul li a:hover {
				background-color: #2a5178; /* soldier blue milk paint */
		}
}

@media only screen and (min-width: 992px) {
		.contact {
			display: flex;
			flex-grow: 1;
			width: 40px;
			justify-content: flex-end;
			padding-right:50px;
			align-items: center;
		}
}

@media only screen and (min-width: 992px) {
		.contact h3 {
			font-size: 2em;
			color: white;
			font-weight: 600;
		}
}

@media only screen and (min-width: 992px) {
		.contact a {
			text-decoration: none;
			font-size: 1.60em;
			color: white;
			padding: 12px 0px 0px 0px;
		}
}

@media only screen and (min-width: 992px) {
		.contact img {
			max-width: 32px;
			max-height: 32px;
			margin: 0px 5px 0px 20px;
		}
}

@media only screen and (min-width: 992px) {
		.contact p {
			color: white;
			font-size: 1.5em;
			padding: 20px 25px 0px 5px;
		}
}


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

@media only screen and (min-width: 992px) {
		.row4 p {
			font-size: 1.75em;
		}
}

@media only screen and (min-width: 992px) {
		.row4 a {
			text-decoration: none;
			font-weight: bold;
		}
}

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

@media only screen and (min-width: 992px) {
		.flex_container div {
			width: 240px;
			height: 427px;
			justify-content: center;
			border-radius: 20px;
			border: solid 10px white;
			filter: drop-shadow(2px 2px 4px #666666);
			background-color: #FFF7D6;
			margin: 10px;
			overflow: hidden;
		}
}

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

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

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

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


/*==============================
		    DOMAIN SALE FORM
  ==============================*/
@media only screen and (min-width: 992px) {
		.form_container {
			display: flex;
		}
}

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

@media only screen and (min-width: 992px) {
		.form_container label {
			display: flex;
			font-size: 1.25em;
		}
}

@media only screen and (min-width: 992px) {
		.form_container 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 (min-width: 992px) {
		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 (min-width: 992px) {
		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 (min-width: 992px) {
		input[type=submit] {
			width: 100%;
			background-color: #254ba6;
			color: white;
			padding: 14px;
			margin: 8px 0;
			border: none;
			border-radius: 5px;
		}
}	

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

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

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


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

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

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

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

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

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

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

@media only screen and (min-width: 992px) {
		.st_swithuns video {
			border-radius: 10px;
			height: 300px;
			width: auto;
		}
}

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


/*========================================*/
/*    ROW5 = FOOTER - UNOBTANIUM TITLE    */
/*========================================*/
@media only screen and (min-width: 992px) {
		.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: 992px) {
		.row5 a {
			text-decoration: none;
			margin: auto;
		}
}

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


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

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

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

@media only screen and (min-width: 992px) {
		.row6 p {
			color: white;
			font-size: 1.75em;
			margin-right: 30%;
		}
}


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

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


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

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