@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;700&family=Roboto:ital,wght@0,400;0,500;1,500&display=swap');

body {
	font-family: Roboto;
	font-size: 16px;
	line-height: 1.5;
	
	background-color: #fff8ef;
	color: #333333;
	margin: 80px auto 46px auto;
	width: 1128px;
}

em {
  font-style: italic;
}

header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  
}


nav a {
  margin: 0 0 0 32px;
}

h1, nav{
  font-family: Lora;
	font-size: 40px;
	font-weight: 700;
  line-height:  1.2;
  
}

h2{
  font-family: Roboto;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
}

h3{
  font-family: Roboto;
  font-size: 24px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.3;
  
}

h4, footer{
  font-family: Lora;
	font-size: 24px;
	font-weight: 700;
  line-height:  1.2;
}

h5{
  font-family: Lora;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

h6{
  font-family: Lora;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
}

a {
  color: #FDC937;
  text-decoration: none;
  transition: color 0.3s, border-bottom 0.3s;
  border-bottom:  2px solid transparent;
  }

a:hover, a.selected {
  color: #e48972;
  border-bottom: 2px solid #E48972;
  
  
}
section{
margin: 80px 0 80px 0;
  
  display: grid;
	grid-template-columns: repeat(12, 1fr);
  gap: 24px 24px;
  grid-auto-flow: dense;
  
}


section h2 {
grid-column: 2 / span 10;
  text-align: center;


}

section.portfolio div.artwork {
  grid-column:  1 / span 8;
  text-align: center;
  }

section.portfolio div.description{
  grid-column:  10 / span 3;
  text-align: center;
  margin: 239px 0 0 0;
  }

section.portfolio img{
  max-height: 744px;
}

section.portfolio-alt div.artwork {
  grid-column:  5 / span 12;
  text-align: center;
  }

section.portfolio-alt div.description{
  grid-column:  1 / span 4;
  text-align: center;
  }

section h6{
  grid-column: 4 / span 6;
  text-align: center;
}

section.gallerytitle-2 h6{
  grid-column: 3 / span 8;
  text-align: center;
}

section.gallerytitle-3 h6{
  grid-column: 3 / span 8;
  text-align: center;
}

section.work img{
	max-height: 241px;
  padding: 15px;
  text-align: center;
}
section.work{
  display: flex;
  text-align: center;
}

section.work div.gallery {
  flex: 33.33%;
  padding: 5px;
 
}



section.about div.photo {
  grid-column: 1 / span 5;
}

section.about div.description {
  grid-column: 6 / span 7;
  
}

section.about h5 {
  margin: 0 0 0 0;
  text-align: left;
}

section.about p {
  margin: 16px 0 16px 0;
}

section.contact div.contact-description {
  grid-column: 1 / span 11;
}

section.contact h5 {
 	margin: 0 0 0 0;
  text-align: center;
  }
  
  section.contact p {
    margin: 16px 0 16px 0;
    text-align: center;
    }

section.contact a {
  color: #FDC937;
  text-decoration: none;
  margin: 0;
  transition: color 0.3s;
  border-bottom: none;
}
section.contact a:hover, section.contact a.selected, a.header-alt, a.hover-link {
  color: #e48972;
  border-bottom: none;
}
  


footer{
  display: flex;
  align-items: center;
  justify-content: center;
}

footer a{
  color: #FDC937;
  margin: 0 16px 0 16px;
  
}

footer a:hover{
  color: #e48972;
  
}



.hvrbox,
.hvrbox * {
	box-sizing: border-box;
}
.hvrbox {
	position: relative;
	display: inline-block;
	overflow: hidden;
	max-width: 100%;
	height: auto;
}
.hvrbox img {
	max-width: 100%;
}
.hvrbox .hvrbox-layer_bottom {
	display: block;
}
.hvrbox .hvrbox-layer_top {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background:rgba(238, 137, 114, 0.6);
	color: #fff;
	padding: 15px;
	-moz-transition: all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
	opacity: 1;
}
.hvrbox .hvrbox-text {
	text-align: center;
	font-size: 16px;
  font-family: Roboto;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.hvrbox a {
  color: #ffffff;
  text-align: center;
}
.hvrbox .hvrbox-text_mobile {
	font-size: 15px;
	border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
	border-top: 1px solid rgba(179, 179, 179, 0.7);
	margin-top: 5px;
	padding-top: 2px;
	display: none;
}
.hvrbox.active .hvrbox-text_mobile {
	display: block;
}

@media(max-width: 1224px) {
  body{
    width: auto;
    margin: 80px 48px 46px 48px;
  }
  h1, nav{
    font-size: 32px;
  }
  
  .portfolio{
    display: flex;
    flex-direction: column-reverse;
  }
  
  section.portfolio div.description{
    margin-top: 32px;
    margin-bottom: 16px;
  
    
  }
  
}

@media(max-width: 908px){
  header {
    flex-direction: column;
    
  }
  nav{
    margin: 16px 0 0 0;
  }
  header img{
    max-width: 300px;
  }
  
  header a{
    margin: 0 16px 0 16px;
  }
  
}

@media(max-width: 785px) {
  
  nav a {
    margin: 8px 0 0 0;
  }
  
  section{
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 16px;
    margin: 48px 0 48px 0;
  }
  
  section h2, section.portfolio div.artwork, 
  section.portfolio div.description,
  section.portfolio-alt div.artwork,
  section.portfolio-alt div.description,
  section.about div.photo, 
  section.about div.description,
  section h6,
  section.gallerytitle-2 h6,
  section.gallerytitle-3 h6,
  section.contact div.contact-description {
    grid-column: 1 / span 4;
  }
  
}

@media(max-width: 516px){
  body {
    margin: 24px;
  }
  header img{
    width: 100%;
  }
  
  nav{
    font-size: 24px;
  
  }
  footer{
    flex-direction: column;
  }
  
}