/* ************************************************************
     small devices (tablets and large phones, 601px and up)
   ************************************************************ */


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


/*==============================
         HEADER SECTION
  ==============================*/
@media only screen and (min-width: 601px) {
		.head_container {
			display: flex;
			flex-direction: column;
			min-width: 100%;
			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: 601px) {
		.head_container img {
			width: 350px;
			height: auto;
		}
}

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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


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

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

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

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

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


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

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

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

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


/*=========================================== 
            -- domain sale form --
  ===========================================*/
@media only screen and (min-width: 601px) {
		.form_container {
			justify-content: left;
			width: 100%;
		}
}

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

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

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

@media only screen and (min-width: 601px) {
		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: 601px) {
		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: 601px) {
		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: 601px) {
		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: 60p1x) {
	input {
			font-size: 1.25em;
		}
}

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

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


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

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

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

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

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

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


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

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

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

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

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


/*========================================
        ROW5 = FOOTER - AKOOLA TITLE 
  ========================================*/
@media only screen and (min-width: 601px) {
		.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 (max-width: 600px) {
		a {
			text-decoration: none;
		}
}

@media only screen and (min-width: 601px) {
		.row5 img {
			width: 150px;
			height: auto;
			margin-left: auto;
		}
}


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

@media only screen and (min-width: 601px) {
		.row6 img {
			max-width: 20px;
			max-height: auto;
			margin-right: 5px;
		}
}

@media only screen and (min-width: 601px) {
		.row6 a {
		  text-decoration: none;
		  padding: 2px 0px 0px 3px;
		}
}

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




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

		}
}

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


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

@media only screen and (min-width: 601px) {
		.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) {

}