/* INFORMATION
Author: Dusty Mendes
Company: MENDES
Created: September 2023
*/


/* INITIALIZE
--------------------------------------------------------------------*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,table,tr,th,td,embed,object {margin:0; padding:0;}
em,h1,h2,h3,h4,h5,h6,strong {font-style:normal; font-weight:normal;}
ul,ol {list-style:none;}
a {text-decoration:none;}
img, button {border: 0;}

*:focus, a:active {outline: 0; -moz-outline: none;}


/* FONTS
--------------------------------------------------------------------*/
@font-face {
    font-family: 'TAY Barrera';
    src: url('../fonts/TAYBarreraRegular.woff2') format('woff2'),
        url('../fonts/TAYBarreraRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}


/* HTML & BODY
--------------------------------------------------------------------*/
html {
	width: 100%;
	height: 100%;
	background: #e5e4de;
	scroll-behavior: smooth;
}

body {	
	width: 100%;
	height: 100%;
	color: #000;
	z-index: 0;
	position: relative;
}


/* GENERAL STYLES & TREATMENTS
--------------------------------------------------------------------*/

.show {
	display: block;
}

.no-show {
	display: none;
}

.half-opac {
	opacity: .24;
}

.no-opac {
	opacity: 0;
}

.rotate-90 {
	transform: rotate(90deg);
}

.circle {
	border-radius: 50%;
}

.zi-minus-one {
	z-index: -1;
}

.zi-one {
	z-index: 1;
}

.zi-two {
	z-index: 2;
}

.zi-three {
	z-index: 3;
}

.zi-four {
	z-index: 4;
}

.zi-five {
	z-index: 5;
}

.zi-six {
	z-index: 6;
}


/* ANIMATIONS
--------------------------------------------------------------------*/

@keyframes am-fadein {
  from {opacity: 0; transform: translatey(12px);}
  to {opacity: 1; transform: translatey(0);}
}


@keyframes side-fadein {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* LAYOUT
--------------------------------------------------------------------*/

#main-container {
	width: 100%;
	height: 100%;
	position: relative;
}

#pre-header {
	width: 100%;
	text-align: center;
	margin: 24px auto 0 auto;
	font-family: 'TAY Barrera';
	font-size: 14px;
	font-weight: normal;
	font-style: normal;
	/*animation-name: am-fadein;
	animation-duration: 1.5s;*/
}

#header {
	width: 100%;
	text-align: center;
	margin: 60px auto 0 auto;
	font-family: 'TAY Barrera';
	font-weight: normal;
	font-style: normal;
	/*animation-name: am-fadein;
	animation-duration: 1.5s;*/
}

#header a {color: #000;}
#header a:hover {color: #000;}
#header a:active {color: #000;}
#header a:visited {color: #000;}

#announcement {
	width: 100%;
	text-align: center;
	margin: 60px auto 0 auto;
	font-family: 'TAY Barrera';
	font-size: 14px;
	font-weight: normal;
	font-style: normal;
	/*animation-name: am-fadein;
	animation-duration: 1.5s;*/
}

#menu-container {
	width: 100%;
	text-align: center;
	margin: 0;
	padding: 0;
	font-family: 'Garamond'; font-family: 'Playfair Display';
	font-weight: normal;
	font-style: normal;
	/*animation-name: am-fadein;
	animation-duration: 1.5s;
	animation-delay: .25s;*/
}

	#menu-container a {
		color: #000;
		transition: .25s; text-size: 50%;
	}

	#menu-container a:hover {
		background: #c9c8c3;
		transition: .25s;
	}

#works-container {
	text-align: center;
	margin: 60px auto 0 auto;
}

.works-container-div {
	float: left;
	overflow: hidden;
}

.works-container-div img {
	width: 100%;
	height: auto;
	cursor: pointer;
	transition: all 0.3s ease-out;
	filter: brightness(95%);
}

.works-container-div img:hover {
	filter: brightness(110%);
	cursor: pointer;transform: scale(1.03);
}

#quote-container {
	width: 100%;
	text-align: center;
	margin: 60px auto 0 auto;
	font-family: 'TAY Barrera';
	font-weight: normal;
	font-style: normal;
	float: left;
}

#poppy-container {
	width: 100%;
	text-align: center;
	margin: 60px auto 20px auto;
	float: left;
}

	#poppy-container img {
		width: 10%;
		height: auto;
	}

#footer {
	width: 100%;
	text-align: center;
	margin: 0 auto;
	font-family: 'TAY Barrera';
	font-weight: normal;
	font-style: normal;
	padding-bottom: 60px;
	float: left;
}




#contact-container {
	width: 100%;
	text-align: center;
	margin: 60px auto 0 auto;
	font-family: 'TAY Barrera';
	font-weight: normal;
	font-style: normal;
	float: left;
}

#contact-container a {color: #000; transition: all 0.3s ease-out;}
#contact-container a:hover {color: #000; background:#c9c8c3;}
#contact-container a:active {color: #000; background:#c9c8c3;}
#contact-container a:visited {color: #000;}



#about-container {
	width: 100%;
	text-align: center;
	margin: 60px auto 0 auto;
	float: left;
}

#about-photo {

	float: left;
}

#about-photo img {
	width: 100%;
	height: auto;
}

#about-copy {
	text-align: left;
	font-family: Courier;
	float: left;
}

#about-copy span {
	font-family: 'TAY Barrera';
}


/* Zoom Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Disable scroll */
	background-color: rgb(229,228,222); /* Fallback color */
	background-color: rgba(229,228,222,.95); /* w/ opacity */
}

/* Modal Image */
.modal-content {
	margin: 3% auto 0 auto;
	display: block;
	height: 85%;
	width: auto;
}

/* Modal Caption - Same Width as the Image */
#caption {
	margin: 20px auto 0 auto;
	display: block;
	width: auto;
	text-align: center;
	color: #000;
	font-family: Courier;
}

/* Modal Animation */
.modal-content, #caption {
	animation-name: zoom;
	animation-duration: 0.6s;
}

@keyframes zoom {
	from {transform:scale(0)}
	to {transform:scale(1)}
}

/* Modal Close Button */
.close {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #000;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}

.close:hover,
.close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}



	/* Extra small devices (phones, 600px and down) */
	@media only screen and (max-width: 600px) {
		#pre-header {font-size: 10px;}
		#header {margin-top: 24px; font-size: 32px;}
		#header span {font-size: 36px;}

		#menu-container {margin-top: 32px; font-size: 16px; letter-spacing: 1px;}
		#menu-container a:first-child {display: none;}

		#announcement {margin-top: 32px; font-size: 11px;}

		#works-container {width: 375px;}
		.works-container-div {width: 180px; height: 110px; margin: 0 0 5px 5px;}

		#quote-container {font-size: 16px;}
		#poppy-container img {width: 15%; height: auto;}
		#footer {font-size: 10px;}

		#caption {max-width: 90%; height: auto; font-size: 13px;}
		.modal-content {margin-top: 80px; max-width: 90%; height: auto;}

		#about-photo {width: calc(100% - 60px); margin: 0 30px 30px 30px;}
		#about-copy {width: calc(100% - 60px); margin: 0 30px;}

		#contact-container {font-size: 16px;}
	}

	/* Small devices (portrait tablets and large phones, 600px and up) */
	@media only screen and (min-width: 600px) {
		#pre-header {font-size: 12px;}
		#header {font-size: 42px;}
		#header span {font-size: 48px;}

		#menu-container {margin-top: 32px; font-size: 22px; letter-spacing: 1px;}
		#ig-standard {display: none;}
		#ig-mobile {display: block;}

		#announcement {font-size: 12px;}

		#works-container {width: 600px;}
		.works-container-div {width: 192px; height: 118px; margin: 0 0 6px 6px;}

		#quote-container {font-size: 24px;}
		#poppy-container img {width: 15%; height: auto;}
		#footer {font-size: 14px;}

		#about-photo {width: calc(100% - 60px); margin: 0 30px 30px 30px;}
		#about-copy {width: calc(100% - 60px); margin: 0 30px;}

		#contact-container {font-size: 24px;}
	}

	/* Medium devices (landscape tablets, 768px and up) */
	@media only screen and (min-width: 768px) {
		#header {font-size: 48px;}
		#header span {font-size: 54px;}
		#menu-container {margin-top: 32px; font-size: 28px; letter-spacing: 1px;}
		#ig-standard {display: block;}
		#ig-mobile {display: none;}

		#announcement {font-size: 14px;}

		#works-container {width: 768px;}
		.works-container-div {width: 248px; height: 153px; margin: 0 0 6px 6px;}

		#quote-container {font-size: 28px;}
		#footer {font-size: 14px;}

		#about-photo {width: calc(35% - 30px); 	margin: 0 0 0 30px;}
		#about-copy {width: calc(65% - 60px); margin: 0 30px;}

		#contact-container {font-size: 28px;}
	}

	/* Large devices (laptops/desktops, 992px and up) */
	@media only screen and (min-width: 992px) {
		#header {font-size: 64px;}
		#header span {font-size: 72px;}
		#menu-container {margin-top: 32px; font-size: 32px; letter-spacing: 2px;}
		#ig-standard {display: block;}
		#ig-mobile {display: none;}

		#announcement {font-size: 14px;}

		#works-container {width: 992px;}
		.works-container-div {width: 324px; height: 200px; margin: 0 0 5px 5px;}

		#quote-container {font-size: 36px;}
		#footer {font-size: 14px;}

		#about-photo {width: calc(35% - 60px); margin: 0 0 0 60px;}
		#about-copy {width: calc(65% - 120px); margin: 0 60px;}

		#contact-container {font-size: 36px;}
	}

	/* Extra large devices (large laptops and desktops, 1200px and up) */
	@media only screen and (min-width: 1200px) {
		#header {font-size: 88px;}
		#header span {font-size: 100px;}
		#menu-container {margin-top: 32px; font-size: 44px; letter-spacing: 2px;}
		#ig-standard {display: block;}
		#ig-mobile {display: none;}

		#announcement {font-size: 14px;}

		#works-container {width: 1200px;}
		.works-container-div {width: 392px; height: 242px; margin: 0 0 6px 6px;}

		#quote-container {font-size: 40px;}
		#footer {font-size: 16px;}

		#about-photo {width: calc(35% - 60px); margin: 0 0 0 60px;}
		#about-copy {width: calc(65% - 120px); margin: 0 60px;}

		#contact-container {font-size: 40px;}
	}

	/* Extra Extra large devices (extra large laptops and desktops, 1440px and up) */
	@media only screen and (min-width: 1440px) {
		#pre-header {font-size: 14px;}
		#header {font-size: 106px; letter-spacing: -2px;}
		#header span {font-size: 120px;}
		#menu-container {margin-top: 48px; font-size: 44px; letter-spacing: 2px;}
		#ig-standard {display: block;}
		#ig-mobile {display: none;}

		#announcement {font-size: 14px;}

		#works-container {width: 1440px;}
		.works-container-div {width: 472px; height: 291px; margin-left: 6px;}

		#quote-container {font-size: 48px;}
		#footer {font-size: 18px;}

		#about-photo {width: calc(35% - 60px); 	margin-left: 60px;margin: 0 0 0 60px;}
		#about-copy {width: calc(65% - 120px); margin: 0 60px;}

		#contact-container {font-size: 48px;}
	}