/* twofishceramics.css  */

html {
	/*background: aqua;*/
	color: #333333;
	font-size: 16px;
	line-height: 150%;
}

body {
	background: #666666 url("images/pexels-beckett-johnson-5022325.jpg") center center repeat-y;
	background-size: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans', sans-serif;
	/*background-size: cover;*/
}

.content-main {
	/*background: pink;*/
	/*background: url("images/pexels-beckett-johnson-5022325.jpg") center center no-repeat;*/
	/*background-size: cover;*/
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.content-main .content-wrapper {
	/*background: orange;*/
	background: #333333;
	background: rgb(51, 51, 51);
	background: rgba(51, 51, 51, 0.5);
	margin: 0;
	padding: 10px 50px;
	color: #FFFFFF;
}

/*Site Title*/

.content-main .site-title-wrapper {
	background: /*orange*/ url("images/2Fish-01.png") left center no-repeat;
	background-size: contain;
	filter: brightness(200%);
	width: 100%;
	height: 120px;
	margin: 0;
	padding: 30px 10px 10px 100px;
}

.content-main .site-title-wrapper h1.site-title {
	/*background: khaki;*/
	margin: 0;
	padding: 10px;
	font-size: 48px;
	font-weight: 400;
	color: #FFFFFF;
}

@media all and (min-width: 960px) {

	.content-main .site-title-wrapper {
		background: /*orange*/ url("images/2Fish-01.png") left center no-repeat;
		background-size: contain;
		filter: brightness(200%);
		width: 100%;
		height: 120px;
		margin: 0;
		padding: 30px 10px 10px 100px;
	}
	
	.content-main .site-title-wrapper h1.site-title {
		/*background: khaki;*/
		margin: 0;
		padding: 10px;
		font-size: 48px;
		font-weight: 400;
		color: #FFFFFF;
	}
}

@media all and (min-width: 480px) and (max-width: 959px) {

	.content-main .site-title-wrapper {
		background: /*orange*/ url("images/2Fish-01.png") left center no-repeat;
		background-size: contain;
		filter: brightness(200%);
		width: 100%;
		height: 120px;
		margin: 0;
		padding: 30px 10px 10px 100px;
	}
	
	.content-main .site-title-wrapper h1.site-title {
		/*background: khaki;*/
		margin: 0;
		padding: 10px;
		font-size: 48px;
		font-weight: 400;
		color: #FFFFFF;
	}
}

@media all and (min-width: 0px) and (max-width: 479px) {

	.content-main .site-title-wrapper {
		background: /*orange*/ url("images/2Fish-01.png") left center no-repeat;
		background-size: contain;
		filter: brightness(200%);
		width: 100%;
		height: 120px;
		margin: 0;
		padding: 20px 10px 10px 100px;
	}
	
	.content-main .site-title-wrapper h1.site-title {
		/*background: khaki;*/
		margin: 0;
		padding: 10px;
		font-size: 36px;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 42px;
	}
}


/*Gallery*/

.content-main .gallery-images-wrapper {
	/*background: lime;*/
	margin: 0;
	padding: 10px 20px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	align-content: space-between;
	gap: 10px;
}

@media all and (min-width: 960px) {

	.content-main .gallery-image-wrapper {
		/*background: lime;*/
		position: relative;
		margin: 0;
		padding: 10px;
		flex: 0 1 25%;
		border-radius: 5px;
		background: #333333;
		background: rgb(51, 51, 51);
		background: rgba(51, 51, 51, 0.75);
	}
}

@media all and (min-width: 480px) and (max-width: 959px) {

	.content-main .gallery-image-wrapper {
		/*background: lime;*/
		position: relative;
		margin: 0;
		padding: 10px;
		flex: 0 1 40%;
		border-radius: 5px;
		background: #333333;
		background: rgb(51, 51, 51);
		background: rgba(51, 51, 51, 0.75);
	}
}

@media all and (min-width: 0px) and (max-width: 479px) {

	.content-main .gallery-image-wrapper {
		/*background: lime;*/
		position: relative;
		margin: 0;
		padding: 10px;
		flex: 0 1 100%;
		border-radius: 5px;
		background: #333333;
		background: rgb(51, 51, 51);
		background: rgba(51, 51, 51, 0.75);
	}

}

.content-main .gallery-image {
	/*background: khaki;*/
	width: 100%;
	margin: 0;
	padding: 0;
}

.content-main .gallery-image img {
	/*background: pink;*/
	width: 100%;
	margin: 0;
	padding: 0;
}

.content-main .gallery-image-description {
	/*background: pink;*/
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 10px 10px 20px 10px;
	background: #333333;
	background: rgb(51, 51, 51);
	background: rgba(51, 51, 51, 0.75);
}

.content-main .gallery-image-description p {
	/*background: lime;*/
	margin: 0;
	padding: 2px 10px 2px 10px;
}

.content-main .gallery-image-description .material-symbols-outlined {
	/*background: lime;*/
	margin: 0;
	padding: 0;
	font-size: 16px;
}

/*Contact*/

@media all and (min-width: 960px) {

	.content-main .contact-wrapper {
		background: /*pink*/ url("images/2Fish-02.png") right center no-repeat;
		background-size: contain;
		filter: brightness(200%);
		width: 100%;
		height: 160px;
		margin: 0;
		padding: 10px 60px 10px 10px;
		color: #FFFFFF;
		text-align: right;
	}
	
	.content-main .contact-wrapper h2 {
		/*background: lime;*/
		margin: 0;
		padding: 5px 10px;
		font-size: 36px;
		font-weight: 400;
	}
	
	.content-main .contact-wrapper p {
		/*background: orange;*/
		margin: 0;
		padding: 5px 10px;
		font-size: 24px;
	}
	
	.content-main .contact-wrapper p.copyright {
		font-size: 16px;
	}
	
	.content-main .contact-wrapper p a {
		/*background: aqua;*/
		color: #FFFFFF;
	}
}

@media all and (min-width: 480px) and (max-width: 959px) {

	.content-main .contact-wrapper {
		background: /*pink*/ url("images/2Fish-02.png") right center no-repeat;
		background-size: contain;
		filter: brightness(200%);
		width: 100%;
		height: 160px;
		margin: 0;
		padding: 10px 60px 10px 10px;
		color: #FFFFFF;
		text-align: right;
	}
	
	.content-main .contact-wrapper h2 {
		/*background: lime;*/
		margin: 0;
		padding: 5px 10px;
		font-size: 36px;
		font-weight: 400;
	}
	
	.content-main .contact-wrapper p {
		/*background: orange;*/
		margin: 0;
		padding: 5px 10px;
		font-size: 24px;
	}
	
	.content-main .contact-wrapper p.copyright {
		font-size: 16px;
	}
	
	.content-main .contact-wrapper p a {
		/*background: aqua;*/
		color: #FFFFFF;
	}
}

@media all and (min-width: 0px) and (max-width: 479px) {

	.content-main .contact-wrapper {
		background: /*pink*/ url("images/2Fish-02.png") right center no-repeat;
		background-size: contain;
		filter: brightness(200%);
		width: 100%;
		height: 160px;
		margin: 0;
		padding: 10px 50px 10px 10px;
		color: #FFFFFF;
		text-align: right;
	}
	
	.content-main .contact-wrapper h2 {
		/*background: lime;*/
		margin: 0;
		padding: 5px;
		font-size: 28px;
		font-weight: 400;
	}
	
	.content-main .contact-wrapper p {
		/*background: orange;*/
		margin: 0;
		padding: 5px;
		font-size: 16px;
	}
	
	.content-main .contact-wrapper p.copyright {
		font-size: 10px;
	}
	
	.content-main .contact-wrapper p a {
		backgrou/*n*/d: aqua;
		color: #FFFFFF;
	}
}