/* CSS TABLE OF CONTENTS 

  # TYPOGRAPHY
    # BODY
    # PARAGRAPH
    # LINKS
    # HEADINGS
  # STRUCTURE
    # HEADER
    # FOOTER
    # NAV

*/

body {
  font-family: utopia-std, serif;
  font-weight: 400;
  font-size: 87.5%; /* 14px */
  letter-spacing: 0.05em;
  color: rgba(0, 0, 0, 0.7);
  padding: 1em;
  max-width: 1000px;
  margin: 0 auto;
}

p {
  max-width: 35em;
}

a {
  color: rgb(102, 63, 43);
  text-decoration: none;
}

a:hover {
  color: rgb(102, 63, 43);
}


h1,h2,h3,h4,h5,h6 {
  font-weight: 400;
  font-family: "cronos-pro", sans-serif;
}

h1.headline {
  font-family: utopia-std, serif;
  font-size: 3.5em;
}
h2.subheadline {
  font-style: italic;
}

section.home.main h1 {
  font-size: 3em;
  font-family: "cronos-pro", sans-serif;
  color: rgb(95, 67, 62);
  margin: 0;
}

section.home.main p {
  font-size: 1.8em;
  font-family: "cronos-pro", sans-serif;
  font-weight: 200;
  color: rgb(163, 129, 116);
  margin-left: auto;
  margin-right: auto;
}



h2.section-head {
  font-family: utopia-std, serif;
  font-size: 2em;
  text-align: center;
  margin-top: 100px;
}

.palovina-design h2.section-head {
  margin-top: 0;
}

.proposed {
  margin-left: auto;
  margin-right: auto;
}
h3.proposed, p.proposed {
  text-align: center;
  color: #fff;
}
h3.proposed {
  font-size: 2em;
}
a.p-button {
  font-family: "cronos-pro", sans-serif;
  text-transform: uppercase;
  color: rgb(40, 138, 177);
}

/* HELPER CLASSES */
.text-centered {
  text-align: center;
}

/* LAYOUT */

.container {
  max-width: 1000px;
  margin: 0 auto;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
}

.container.mini {
  max-width: 600px;
  margin: 160px auto 140px;  
}

/* STRUCTURE */

.site-header,
.site-footer {
  text-align: center;
  margin: 1em 0;
  padding-bottom: 1em;
}

.site-header h1 {
  font-size: 1.5em;
  font-weight: 400;
  margin: 0;
}

.site-header h1 a {
  color: rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 1em;
  display: inline-block;
  /* transition: .2s ease-out all; */
}

.site-header h1 a:hover {
  color: rgba(0, 0, 0, 1);
}

.site-navigation ul {
  padding: 0;
  margin: 0;
}

.site-navigation ul li {
  display: inline-block;
}

.site-navigation ul li a {
  display: block;
  padding: 1em 0.5em;
  margin: 0 0.5em;
  color: rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 2px solid rgba(0, 0, 0, 0);
  /* transition: .2s ease-out all; */
}

.site-navigation ul li a:hover {
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 1);
}

.site-navigation ul li a.selected {
  border-bottom: 2px solid rgba(0, 0, 0, 0.5);
}

/* MEDIA */
img {
  max-width: 100%;
  height: auto;
}

img.shadow {
  box-shadow: 10px 10px 10px grey;
}

/* THUMBGRID */

.thumbgrid {
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.thumbgrid li {
  list-style: none;
  width: 49%;
  margin-bottom: 0.8%;
  /* transition: 0.4s ease-out all; */
  overflow: hidden;
}

@media (min-width: 768px) {
  .thumbgrid li {
    width: 24%;
  }
}

.thumbgrid li a {
  display: block;
  transition: 0.2s ease-out all;
  width: 100%;
  margin: 0;
  position: relative;
}

.thumbgrid li a:hover {
  width: 106%;
  margin: -3%;
}
.thumbgrid li a::after {
  display: block;
  content: "";
  background: black;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 0.4s ease-out all;
}

.thumbgrid li a:hover::after {
  opacity: 0.1;
}

.thumbgrid li a img {
  display: block;
}

/* BUTTONS */
.button {
  display: inline-block;
  border-radius: 2em;
  padding: 1em 2em;
  margin: 1em;
  border: 1px solid rgb(102, 63, 43);
  font-family: "cronos-pro", sans-serif;
  text-transform: uppercase;
  color: rgb(95, 67, 62);
  /* transition: all .4s ease-out; */
}

.button:hover {
  background: rgb(95, 67, 62);
  color: rgba(255, 255, 255, 1);
}

/* SECTIONS */

.hero {
  padding: 10% 1em;
  text-align: center;
}

.hero h1 {
  max-width: 13em;
  margin: 0 auto 1em auto;
}

.hero p {
  margin: 0 auto 1em auto;
}

/* HOME SECTION */
section.home.main {
  padding: 5% 1em;
  text-align: center;
  background-image: url(../img/bracelet1600x1000.png); 
  background-repeat: no-repeat;
  background-size: contain;
}

@media (max-width: 768px) {
  section.home.main {
    width: 450px;
    height: 350px;
    /* margin-top: 80px; */
    margin-bottom: 0;
    background-size: 175%;
    background-position: center;
   
  }
.container.mini {
  margin-top:  110px;
  padding-top: 0;
  padding-bottom: 50px;
   width: 450px;
 }

.container.mini h1 {
  font-size: 1em;
  margin: 0;
}
.container.mini {
  font-size: .8em;
 
}}

.hero h1 {
  max-width: 13em;
  margin: 0 auto 1em auto;
  font-family: "cronos-pro", sans-serif;
}

.hero p {
  margin: 0 auto 1em auto;
}

/* SECTION ABOUT */
.narrow {
  max-width: 600px;
  /* text-align: center; */
}

/* MY PHOTOES */
.a {
  display:none;
}

.b {
  display:block;
}

.hov:hover > .a {
  display:block;
}
.hov:hover > .b {
  display:none;
}

/* ANIMATIONS */

.hero,
.hero * {
  animation-name: myheroanimation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.hero h1 {
  animation-delay: 0;
}
.hero p {
  animation-delay: 0.25s;
}
.hero a {
  animation-delay: 0.5s;
}

@keyframes myheroanimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.page-home .site-header {
  animation-name: myheaderanimation;
  animation-duration: 1s;
  animation-delay: 0.75s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes myheaderanimation {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.page-home .site-footer {
  animation-name: myfooteranimation;
  animation-duration: 1s;
  animation-delay: 1.25s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes myfooteranimation {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.page-work .thumbgrid li {
  animation-name: mythumbgridgrow;
  animation-duration: 1s;
  animation-delay: 0;
  opacity: 0;
  animation-fill-mode: forwards;
}
.page-work .thumbgrid li:nth-child(1) {
  animation-delay: 0;
}
.page-work .thumbgrid li:nth-child(2) {
  animation-delay: 0.2s;
}
.page-work .thumbgrid li:nth-child(3) {
  animation-delay: 0.4s;
}
.page-work .thumbgrid li:nth-child(4) {
  animation-delay: 0.6s;
}
.page-work .thumbgrid li:nth-child(5) {
  animation-delay: 0.8s;
}
.page-work .thumbgrid li:nth-child(6) {
  animation-delay: 1s;
}
.page-work .thumbgrid li:nth-child(7) {
  animation-delay: 1.2s;
}
.page-work .thumbgrid li:nth-child(8) {
  animation-delay: 1.4s;
}

@keyframes mythumbgridgrow {
  0% {
    transform: translateX(-20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* PROJECT DETAIL PAGES */

section {
  padding: 8% 2em;
}

.dark {
  background: #000;
  color: #fff;
}

.page-projectdetail {
  max-width: none;
  margin: 0;
  padding: 0;
}

.page-projectdetail .hero {
  background: #fff;
}

.projectinfo {
  text-align: center;
}

.headline {
  font-size: 3em;
}

.subheadline {
  font-size: 2em;
  margin-bottom: 1.5em;
  color: rgba(0,0,0,.5);
  font-weight: 40normal0;
}

.projectinfo p {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.subcontent-text {
  padding: 2em;
}

.subcontent-text h3 {
  font-size: 1.75em;
}

.meta-text h3 {
  border-top: 1px solid rgba(0,0,0,.3);
  padding-top: 2em;
}

.meta-text,
.meta-list {
  padding: 2em;
}

.meta-list {
  list-style: none;
  font-family: "cronos-pro", sans-serif;
}

.meta-list span {
  font-weight: bold;
}

.meta-list {
  padding: 0 5%;
margin: 0;
}

@media (min-width: 768px){

  .projectinfo p {
    columns: 2;
  }

  .two-col .container {
    display: flex;
    align-items: center;
  }

  .two-col .subcontent-image,
  .two-col .subcontent-text {
    width: 50%;
  }

  .col-imagesmaller .container {
    display: flex;
    align-items: flex-start;
  }

  .col-imagesmaller .subcontent-image {
    /* width: 33.3333%; */
    width: 55%;
  }

  .col-imagesmaller .subcontent-text {
    /* width: 66.6666%; */
    width: 45%;
  }

  .flippit .container {
    flex-direction: row-reverse;
  }

  .meta-info .meta-list {
    columns: 1;
  }

  .meta-list {
    padding-top: 10%;
  }}

  

/* REVEALER */
.revealer * {
  transition: all .6s ease;
  opacity: 0;
  transform: translateY(-20px);
}

.revealer *:nth-child(1) { transition-delay: .2s; }
.revealer *:nth-child(2) { transition-delay: .4s; }
.revealer *:nth-child(3) { transition-delay: .6s; }
.revealer *:nth-child(4) { transition-delay: .8s; }
.revealer *:nth-child(5) { transition-delay: .9s; }
.revealer *:nth-child(6) { transition-delay: 1s; }
.revealer *:nth-child(7) { transition-delay: 1.1s; }
.revealer *:nth-child(8) { transition-delay: 1.2s; }
.revealer *:nth-child(9) { transition-delay: 1.3s; }

.active * {
  opacity: 1;
  transform: translateY(0);
}

.black.hero.revealer {
  background-color: #000;
}