@charset "utf-8";
/* CSS Document */

@import url("https://fonts.googleapis.com/css?family=Arya:400,700");

body {
  	color: #121212;
  	font-family: "Arya", sans-serif;
	background:#F8F6F0;
	padding:0;
	margin:0;
	font-size:16px; 
	text-align:center; 
}

h1, h2, h3, a { line-height:1.2; padding:0; margin:0; }
p { font-weight: 400; line-height:1.5; padding:0; margin:0; }
h1 { font-size: 57px; }

.skills { font-size:80%; color: #999; display:block; margin:3px 0 0 0; }
.section-header .skills { font-size:80%; color: #999; display:block; margin:15px 0 25px 0; }

header { width:100%; margin:0 auto; display:block; padding:20px 0 30px; background:#121212; color:#F8F6F0; }
footer { padding:50px 0; border-top:1px solid #e6e6e6; }
footer p { font-size: 13px; color:#121212; text-align:center; margin-top:30px; }

.wrapper { margin:0 auto; }
.intro { margin:0 auto; padding:20px 0; width:95%; }
.intro p { margin-bottom:30px; }
.intro p a, .section-p p a { text-decoration:underline; color:#121212; }
.intro p a:hover, .section-p p a:hover { text-decoration:none; }
.intro h3 { margin-bottom:20px; }

.section-p, .section-1 { width:90%; margin:0 auto; }
.section-header { padding:20px; }
.section-header h3 { font-size:120%; margin-bottom:10px; }
.section-header p { font-size:100%;  }

.text-module { display:block;  }
.text-module-left, .text-module-right { width:90%; text-align:left; margin:0 auto; }

.nav { width:333px; margin:0 auto 20px; display: flex; align-items: center; justify-content: space-between;  }
.nav div a { color:#F8F6F0; text-transform: uppercase; text-decoration:none; }
.nav div a, .nav div span, .bottom-nav a { font-size: 14px; }
.nav div span { color: #999; }

.portfolio-nav { width:100%; margin:0 auto; display:flex; align-items: center; justify-content: space-between; font-size:20px; margin-top:20px; }
span.nolink { color:#ccc;}
.portfolio-nav span a { color:#000; text-decoration:none;}
.portfolio-nav span a:hover { color:#999; text-decoration:none;}

.bottom-nav { margin-bottom:20px; }
.bottom-nav a { color:#121212; text-transform: uppercase; text-decoration:none; }
.bottom-nav a:hover { text-decoration:underline; }

p.email-button, span.email-button { margin:0 auto; }
p.email-button a, span.email-button a { color: #121212; text-decoration: none; border: 1px solid #4A192C; border-radius:4px;  padding:8px 30px 10px; line-height:1; display:inline-block; }
p.email-button a:hover, span.email-button a:hover { background:#121212; color:#F8F6F0; border-radius:4px; }

.soc-med { width:150px; margin:0 auto; display: flex; align-items:center; justify-content: space-around; }
.soc-med div a:hover { color:#999; }

.insta { background:url("images/instagram-icon.png"); }
.behance { background:url("images/behance-icon.png"); }
.insta:hover { background:url("images/instagram-icon_over.png"); }
.behance:hover { background:url("images/behance-icon_over.png"); }
.email { background:url("images/email-icon.png"); }
.email:hover { background:url("images/email-icon_over.png"); }
.etsy { background:url("images/etsy-icon.png"); }
.etsy:hover { background:url("images/etsy-icon_over.png"); }
.insta, .behance, .insta:hover, .behance:hover, .email, .email:hover, .etsy, .etsy:hover { background-position: center; background-repeat: no-repeat; background-size: cover; width:30px; height:30px; transition: linear 0.2s; }

.about-image-1 { width:15%; display:block; margin: 0 auto 20px; }
.about-image-2 { width:45%; display:block; margin: 20px auto 0; }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.image-gallery {
    display:flex;
    flex-wrap:wrap;
}

.image-gallery > * {
    width:100%;
    padding:20px 10px;
}

@media (min-width:768px) {
    .image-gallery > * {
        width:calc(100% / 3);
    }
}
@media (min-width:556px) and (max-width:767px) {
    .image-gallery > * {
        width:calc(100% / 2);
    }
}

.image-item img {
  	width: 100%;
 	object-fit:contain;
	border: 4px solid #fff;
	transition: 0.5s ease-out;
	display:block;
}

.portfolio-gallery img {
  	width: 100%;
 	object-fit:contain;
	display:block;
}

.portfolio-gallery p {
  	text-align:left;
	margin: 20px 0;
}

.image-item a img:hover {
  	width: 100%;
 	object-fit: contain;
	border-color: #666;
}

.image-item p, .image-item h3 { text-align: left; }
.image-item p { font-size:80%; }
.image-item h3 { font-size:110%; }

.underline, .underline-active { position: relative; }

.underline::before{
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
  background-color: #F8F6F0;
  transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.underline-active::before{
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background-color: #999;
}

@media (hover: hover) and (pointer: fine) {
  .underline:hover::before{
    left: 0;
    right: auto;
    width: 100%;
  }
}

@media(min-width: 1024px) {
	.intro, .section-p { width:60%; }
	.intro h3 { font-size: 140%; }
	.container { padding-bottom: 40px; }
	.section-header { display: flex; vertical-align:middle; align-items: center; background:#fff; margin-bottom:5px; }
	.section-header h3 { display: inline-block; width:33%; flex: 1; font-size:120%; justify-content: center; text-align: center; margin-right:20px; margin-bottom:0; }
	.section-header p { display: inline-block; width: 66%; text-align: left; border-left: 1px solid #121212; padding-left:20px; font-size:100%; }
	.text-module { display:flex; gap: 20px; }
	.text-module-left, .text-module-right { width:60%; text-align:left; }
	.nav { margin-bottom:0; }
}

@media (min-width:768px) and (max-width:1023px) {
	.intro, .section-p { width:80%; }
	.text-module { display:flex; gap: 20px; }
	.text-module-left, .text-module-right {width:60%; text-align:left; }
	.nav { margin-bottom:0; }

}

@media(max-width: 825px) {
	body { font-size:18px; }
	h2 { font-size:32px; }
	header { width:100%; }
	.about-image-1 { width:30%; }
	.about-image-2 { width:55%; }

}

@media(max-width: 555px) {
	.nav { width:280px; }
	.nav div a, .nav div span { font-size: 16px; }
	.skills { font-size: 90%; }
	h1 { font-size: 42px; }
	h2 { font-size: 24px; }
	.about-image-1 { width:40%; }
	.about-image-2 { width:75%; }
	.image-item { height:100%; }
}

@media(max-width: 280px) {
	body { font-size:18px; }
	h1 { font-size: 32px; }
	h2 { font-size: 18px; }
	.about-image-2 { width:85%; }
}