@font-face {font-family: "Didot";
  src: url("fonts/251039e6849ad977a8bfc40b564dce89.eot"); /* IE9*/
  src: url("fonts/251039e6849ad977a8bfc40b564dce89.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("fonts/251039e6849ad977a8bfc40b564dce89.woff2") format("woff2"), /* chrome、firefox */
  url("fonts/251039e6849ad977a8bfc40b564dce89.woff") format("woff"), /* chrome、firefox */
  url("fonts/251039e6849ad977a8bfc40b564dce89.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("fonts/251039e6849ad977a8bfc40b564dce89.svg#Didot") format("svg"); /* iOS 4.1- */
  font-display: swap;
}

@font-face {font-family: "Didot Bold";
  src: url("fonts/0ca5d3ce1e4b26b2759ae4e921f8360b.eot"); /* IE9*/
  src: url("fonts/0ca5d3ce1e4b26b2759ae4e921f8360b.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("fonts/0ca5d3ce1e4b26b2759ae4e921f8360b.woff2") format("woff2"), /* chrome、firefox */
  url("fonts/0ca5d3ce1e4b26b2759ae4e921f8360b.woff") format("woff"), /* chrome、firefox */
  url("fonts/0ca5d3ce1e4b26b2759ae4e921f8360b.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("fonts/0ca5d3ce1e4b26b2759ae4e921f8360b.svg#Didot Bold") format("svg"); /* iOS 4.1- */
  font-display: swap;
}



html, body {
  color: #4b4b4b;
  font-family: Didot, Times, Georgia, serif;
  font-weight: normal;
  font-size: 17px;
  /*font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));*/
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
  line-height: 1;
  line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(2500 - 300)));
  text-align: left;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 249);
  background: rgb(36, 36, 35);
}

body {

}

a {
  color: inherit;
  transition: color 0.3s ease-in-out;
}

a:hover {
  color: #b92b0b;
}

.hide {
  display: none;
}

#container {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  max-width: 2600px;
  margin: 0 auto;
  padding: 0;
  background: rgb(255, 255, 249);
  overflow: scroll;
}

#navbar {
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  flex-flow: row nowrap;
  align-items: center;
  margin: 0;
  padding: 3vh 6vw 3vh;
  font-size: 0.8rem;
  z-index: 20;
}

#navbar  * {
  margin: 0;
  padding: 0;
}

#navbar header {
  display: flex;
  justify-content: flex-start;
}

#navbar h1 {
  font-family: "Didot Bold", Didot;
  text-transform: uppercase;
  font-size: 1.5em;
  letter-spacing: 0.04rem;
  white-space: nowrap;
}

#navbar #logo h3 {
  display: none;
}

/*.gallery #navbar h1 {
  font-size: 1.4em;
}*/

#navbar h2 {
  font-size: 1em;
  transition: opacity 0.5s ease-in-out;
}

#navbar h2::before {
  content: ">";
  margin: 0 0.75em;
  color: #999;
}

#navbar h2 span.sep {
  margin: 0 0.1em;
  color: #999;
  font-style: normal;
}

#navbar h2 span.slide-n {
  margin-left: 1em;
  color: #666;
}

.about #navbar h2, .contact #navbar h2, .work #navbar h2 {
  display: none;
}

#navbar a {
  text-decoration: none;
  cursor: pointer;
}

#navbar a:hover {
  color: #b92b0b;
}

#navbar nav {
  display: flex;
  margin: 0;
}

#navbar nav #main-nav {
  display: flex;
  justify-content: flex-end;
  list-style: none;
}

#navbar nav #main-nav li {
  margin-left: 1.6em;
}

#navbar nav #main-nav a.selected, #navbar nav #main-nav a.open {
  font-weight: bold;
  /*font-family: "Didot Bold", Didot;*/
}

#main-nav:after {
  content: "|";
  margin: 0 1.5em;
}

#menu-buttons {
  display: none;
}

#menu-buttons span {
  display: none;
}

.button.show-menu, .button.hide-menu {
  display: block;
  margin: 0;
  padding: 0;
  width: 1.5em;
  height: 1.5em;
  text-align: right;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  cursor: pointer;
  transition: opacity 0.5s ease !important;
}

.button.show-menu {
  background-image: url('img/icon-menu.png');
  opacity: 0.9;
}

.button.show-menu:hover, .button.hide-menu:hover {
  opacity: 1;
}

.button.hide-menu {
  background-image: url('img/icon-cross.png');
  opacity: 0.7;
}

.button.hide-menu {
  display: none;
}

.menu-active .button.show-menu {
  display: none;
}

.menu-active .button.hide-menu {
  display: block;
}


.menu-active #navbar {
  position: fixed;
  width: calc(100% - 6vw - 6vw);
  top: 0;
  left: 0;
}

.menu-active #navbar nav #main-nav {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 1.9em;
  text-align: center;
  background: rgb(255, 255, 249);
  background: rgb(193, 193, 190);
  animation-name: fadeInOpacity;
	animation-duration: 0.4s;
  opacity: 1;
}

.menu-active #navbar nav #main-nav:after {
  content: "";
  margin: 0;
}

.menu-active #navbar nav #main-nav li {
  display: block;
  margin: 1.5em 0 0;
  margin: 6vh 0 0;
  padding: 0 0 1.5em;
  padding: 0 0 6vh;
  border-bottom: 1px solid #d7d7d7;
}

.menu-active #navbar nav #main-nav li:last-child {
  border: none;
}

.menu-active #navbar h2 {
  display: none;
}

.menu-active #navbar #lang-nav {
  display: block;
  margin-top: 0em;
}

#lang-nav {
  display: block;
  height: 1.7em;
  overflow: visible;
}

#lang-nav li {
  display: none;
}

#lang-nav.menu-visible li {
  display: block;
}

#lang-nav li:hover {
  color: #b92b0b;
}

#lang-nav li.selected {
  display: block;
  font-weight: bold;
  /*font-family: "Didot Bold", Didot;*/
  cursor: pointer;
}

#lang-nav.menu-visible li.selected {
  color: #b92b0b;
}

.menu-active #lang-nav.menu-visible li.selected {
  margin-bottom: 0.7em;
}

#lang-nav li.selected span {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin: 0 0 -0.1em 0.3em;
  background-image: url("img/lang-arrow-down.png");
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  cursor: pointer;
  transition: opacity 0.5s ease !important;
}

#lang-nav.menu-visible li.selected span {
  background-image: url("img/lang-arrow-up.png");
}

/*#main-nav .menu-container {
  display: none;
}*/

#content, #gallery, #article-footer {
  flex: 1 1 auto;
  margin: 0;
  padding: 5vh 6vw;
  font-size: 0.8em;
  line-height: 1.45;
  font-family: "Playfair Display", Georgia, Times, serif;
}

.prints #gallery {
  height: 70vh;
}

#article-footer {
  padding: 0;
}

#article-footer .center-credits {
  font-size: 0.7em;
  text-align: center;
  color: #999;
}

#content {
  /*background: rgba(244, 244, 241, 0.9);*/
}

.home #content {
  background: none;
}

#content > * {
  margin: 0;
  padding: 0;
}

#content p {
  margin: 0 0 1em;
}

#content h3 {
  font-size: 1.25em;
  line-height: 1.2; 
  font-family: "Didot Bold", Didot, Times, Georgia, serif;
  margin: 0 0 0.1em 0;
  font-weight: normal;
}

#content ul {
  display: block;
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
}

#content .statement {
  font-size: 2.1em;
  line-height: 1.2; 
  font-family: Didot, Times, Georgia, serif;
}

#content h2, #content h3 {
  font-size: 1.4em;
  line-height: 1.2; 
  font-family: "Didot Bold", Didot, Times, Georgia, serif;
  margin: 0 0 0.5em 0;
  font-weight: normal;
}

.about #content a, .contact #content a {
  color: #0470B9;
}

.about #content a:hover, .contact #content a:hover {
  color: #b92b0b;
}

#content .statement {
  margin: 0 0 1em;
}

/*.about #content h2, .contact #content h2, */
.work #content h2, #gallery h2 { 
  display: none;
}

.home #content h2 {
  margin: 12vh 0 0;
}

#footer {
  flex-shrink: 0;
  padding: 1vh 6vw;
  font-size: 0.55em;
  font-family: "Playfair Display", Georgia, Times, serif;
}

#footer > * {
  margin: 0;
  padding: 0;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 1em 0;
  /*font-size: 0.9em;
  font-family: sans-serif;*/
}

.footer-container p {
  margin: 0;
  color: #666;
}

#breadcrumbs ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

#breadcrumbs li {
  display: inline;
  color: #666;
}

#breadcrumbs li + li::before {
  content: " > ";
  padding: 0 0.5em;
  color: #aaa;
}

#breadcrumbs a {
  
  text-decoration: none;
}

/#breadcrumbs a:hover {
  text-decoration: underline;
}*/

@media (max-width: 600px) {
  .footer-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
  }
}

#welcome-background  {
  position: fixed;
  width: 100%;
  height: 100%;
  max-width: 2600px;
  margin: 0 auto;
  animation-name: fadeInOpacity;
	animation-duration: 2s;
  opacity: 1;
}

#welcome-background figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-image: url('img/170627-Rimini-182421_2000w.jpg?v=00001');
  background-position: center center;
  background-position: 50% 35%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  opacity: 0.1;
  visibility: visible;
  transition: opacity 1.5s;
}

.home #welcome-background figure figcaption {
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  display: block;
  font-size: 1.1rem;
  font-size: 1.8vw;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  width: 100%;
  visibility: hidden;
  font-family: "Didot Bold", Didot;
}

.home #welcome-background figure {
  opacity: 1;
}

.home #welcome-background figure figcaption {
  visibility: visible;
}

.home #content, .home #navbar, .home #footer {
  visibility: hidden;
}

.home #welcome-background figure figcaption a {
  padding: 0.7em 1.2em;
  margin: 0 auto;
  display: inline-block;
  width: auto;
  border: 2px solid #222;
  color: #37312c;
  cursor: pointer;
  text-decoration: none;
}

.home #welcome-background figure figcaption a:hover {
  color: rgb(217, 210, 202);
  background: rgba(37, 30, 24, 0.9);
  border: 2px solid #37312c;;
}

.home .statement {
  max-width: 75%;
}

.about #content p {
  /*max-width: 30rem;*/

}

.about #content p.statement.hidden {
  display: ;
}

.about #content img {
  width: 40%;
  max-width: 26em;
  float: right;
  margin: 0 0 2em 2em;
  margin: 0 0 5vh 5vh;
}

.intro #load-logo {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  font-family: Didot, Times, Georgia, serif;
  font-size: 1em;
  background: rgb(255, 255, 249);;
  z-index: 1;
  visibility: hidden;
  animation-name: fadeOutOpacity;
  animation-duration: 6.7s;
  opacity: 0;
}

.intro #load-logo * {
  margin: 0;
  padding: 0;
}

.intro #load-logo a {
  text-decoration: none;
  margin: auto;
  animation-name: fadeInOutOpacity;
  animation-duration: 5s;
  opacity: 0;
}

.intro #load-logo h2 {
  font-size: 4.2em;
  line-height: 1;
  text-transform: uppercase; 
  margin: 0 0 0.2em; 
  text-align: center;
  /*font-weight: bold;
  font-family: "Didot Bold", Didot;
  letter-spacing: 0.1rem;  */
}

.intro #load-logo h4 {
  display: flex;
  justify-content: center;
  font-size: 1.5em;
  text-align: center;
  color: inherit;
  /*font-family: Didot, Times, Georgia, serif;*/
}

.intro #load-logo a:hover {
  color: inherit;
}

.intro #load-logo h4 span {
  margin: 0 1em;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  opacity: 0;
}

.intro #load-logo h4 span:nth-of-type(3) {
  color: #0470B9;
  animation-delay: 2s;
}

.intro #load-logo h4 span:nth-of-type(1) {
  color: #ECC001;
  animation-delay: 0s;
}

.intro #load-logo h4 span:nth-of-type(2) {
  color: #B52228;
  animation-delay: 1s;
}

.work #content nav * {
  margin: 0;
  padding: 0;
}

.work #content nav a {
  text-decoration: none;
}

.work #content nav a span {


}

.work #content nav {
  margin: 0;
  padding: 0;
  /*font-size: 3.6rem;*/
  line-height: 0.9;
  text-transform: uppercase;
  font-weight: bold;
  font-family: "Didot Bold", Didot;
  color: #3e3d3d;
  animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-duration: 0.5s;
}

.work #content nav .menu-container div, .menu-container section {
  position: relative;
  /*margin: 0 0 0.3em;*/
}

.work #content nav ul {
  position: relative;
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

.work #content nav li {
  display: inline;
  margin: 0;
  padding: 0;
}

.square {
  display: inline-block;
  background: #000;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 0.725em;
  height: 0.725em;
  margin: 0 0.1em;
  padding: 0;
}

nav a .square span {
  display: block;
  margin: 0;
  padding: 0;
  width: 0.725em;
  height: 0.725em;
  opacity: 0;
  transition: opacity 0.5s;
}

nav a:hover .square span {
   opacity: 0.5;
}

.do-not-break {
  white-space: nowrap;
}

.do-not-break-2 {
  white-space: nowrap;
}

.work #content nav h3 {
  margin: 0.3em 0 0.2em;
  padding: 0;
  font-size: 0.3em;
  line-height: 1;
  color: #b7b0a0;
  
  /*position: absolute;
  top: 0.2em;
  left: -1.6em;
  display: inline-block;
  text-align: right;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  margin: 0;
  font-size: 0.29em;*/

  transition: color 0.3s;
  /*transform: translateX(-50%) translateY(-50%) rotate(-90deg);*/
}

.work #content nav .portfolio h3 {
  /*margin-top: 0;*/
}

.work #content nav .portfolio:hover h3 {
  color: #ECC001;
}

.work #content nav .menu-container hr {
  display: none;
}

.work #content nav .portfolio li a:hover {
  color: #0470B9;
}

.work #content nav .portfolio a .square span {
  background-color: #0470B9;
}

.work #content nav .projects:hover h3 {
  color: #0470B9;
}

.work #content nav .projects li a:hover {
  color: #B52228;
}

.work #content nav .projects a .square span {
  background-color: #B52228;
}

.nav-editorial .square {
  background-image: url("img/squares/170716-Comacchio-163816-2.jpg");
}

.nav-lifestyle .square {
  background-image: url("img/squares/180908-Riccione-174756-Edit.jpg");
}

.nav-travel .square {
  background-image: url("img/squares/130708-Savignano%20sul%20Rubicone-162718-2.jpg");
}

.nav-interiors .square {
  background-image: url("img/squares/180724-Hotel Maarea-Milano Marittima-154721.jpg");
  background-image: url("img/squares/180709-Hotel Bassetti-Cervia-214241.jpg");

}

.nav-people .square {
  background-image: url("img/squares/190724-Rimini-190110-Edit.jpg");
}

.nav-dogs .square {
  background-image: url("img/squares/191225-Riccione-174419.jpg");
}

.nav-light .square {
  background-image: url("img/squares/140708-Home-180108.jpg");
}

.nav-color .square {
  background-image: url("img/squares/190806-Misano%20Adriatico-170009.jpg");
}

.nav-design .square {
  background-image: url("img/squares/161210-Rimini-124040.jpg");
}

.nav-rite .square {
  background-image: url("img/squares/210909-Cesenatico-193631-Edit_square.jpg");
}

.nav-fork .square {
  background-image: url("img/squares/201020-Savignano%20sul%20Rubicone-155056-Edit-2.jpg");
}

.nav-numbers .square {
  background-image: url("img/squares/141207-Numbers%20do%20not%20exist-122918.jpg");
}

.nav-chimere .square {
  background-image: url("img/squares/140515-Chimere%20urbane-Savignano%20sul%20Rubicone-172301.jpg");
}

.nav-maybe .square {
  background-image: url("img/squares/160318-Savignano%20sul%20Rubicone-201241-Edit.jpg");
}

.nav-about .square {
  background-image: url("img/squares/150912-Home-180939-Edit.jpg");
}

.nav-contact .square {
  background-image: url("img/squares/200201-Torino-184251.jpg");
}

#gallery {
  position: relative;
}

#gallery .wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#gallery .slide_img {
  display: flex;
  justify-content: center;
  align-items: center; 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /*width: calc(100% - 12vw);/*
  /* increased to avoid arrows go over the photo */
  width: calc(100% - 28vw);
  height: 100%;
  margin: 0;
  /*padding: 0 6vw;*/
  /* increased to avoid arrows go over the photo */
  padding: 0 14vw;
  visibility: visible;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

#gallery .slide_img.active-slide {
  visibility: visible;
  opacity: 1;
}

#gallery figure {
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  background: url("img/load.gif") no-repeat center center;
}

#gallery figure img {
  display: block;
  height: auto;
  width: 100%;
  overflow: auto;
  object-fit: contain;
  margin: 0 auto;
  padding: 0;
}

#gallery figure figcaption {
  padding: 1vh 0;
  display: block;
  text-align: center;
  font-size: 0.7em;
}

#gallery nav {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 0.9em;
}

#gallery nav ul {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#gallery nav li {
  display: block;
  width: 50%;
  height: 100%;
  margin: 0 ;
  padding: 0;
}

#gallery nav li a {
  display: block;
  height: 4em;
  width: 2em;
  margin: 0 6vw;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-decoration: none;
  color: #777;
  cursor: pointer;
  background: rgba(255, 255, 249, 0.0);
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  opacity: 0.4;
  transition: opacity 0.3s;
  border: none;
  overflow: visible;
}

#gallery nav li a span {
  display: none;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 0.8em;
  color: #222;
  width: 6em;
}

#gallery nav li.first-slide a span, #gallery nav li:hover a span {
  display: inline-block;
}

#gallery nav li.gallery-prev a span {
  right: -5em;
  text-align: left;
}

#gallery nav li.gallery-next a span {
  left: -5em;
  text-align: right;
}

#gallery nav li:hover {
  cursor: pointer;
}

#gallery nav li:hover a, #gallery nav li a:hover {
  opacity: 0.8;
}

#gallery nav .gallery-prev {
  float: left;
  text-align: left;
}

#gallery nav .gallery-prev a {
  background-image: url('img/arrow-prev.png');
}

#gallery nav .gallery-next {
  position: relative;
  float: right;
  text-align: right;
}

#gallery nav .gallery-next a {
  float: right;
  background-image: url('img/arrow-next.png');
}

.touch #gallery nav li {
  visibility: hidden;
}

#gallery section.intro-text  {
  position: relative;
  width: 70%;
  height: 100%;
  max-width: 38rem;
  margin: auto;
  padding: 0;
  font-size: 0.95em;
  color: #4b4b4b;
  overflow: scroll;
}

#gallery section.intro-text.active-slide {
  z-index: 10;
}

#gallery section.intro-text div {
  width: 100%;
  height: auto;
  margin: auto;
  padding: 3%;
  text-align: left;
  /*position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);*/
}

#gallery section.intro-text h3 {
  font-size: 2.1em;
  font-family: "Didot Bold", Didot;
  margin: 0 0 0.5em 0;
  padding: 0;
}

#gallery section.intro-text p {
  font-size: 1em;
  text-align: justify;
  text-justify: inter-word;
  /*text-indent: 1.5em;*/
  margin: 0 0 0.6em;
  /*font-family: "Didot", Didot;*/
}

#gallery section.intro-text .view-gallery {
  margin-top: 2em;
  margin-bottom: 2em;
}

#gallery section.intro-text .view-gallery a {
  font-weight: bold;
  /*font-family: "Didot Bold", Didot;*/
  cursor: pointer;
  text-decoration: underline;
}

#gallery section.intro-text .view-gallery:hover {
  text-decoration: underline;
}

.contact #content {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

#content .text {
  flex: 1 1 50vh;
  padding: 0 4vw 4vh 0;
}

#content .contact-form {
  flex: 1 1 50vh;
  max-width: 35rem;
}

#content .contact-form > * {
  font-size: 0.7em;
}

.contact-form fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.contact-form label {
  display: block;
  margin: 0 0 0.5em;
  padding: 0;
}

.contact-form input, .contact-form select, .contact-form textarea, .contact-form button {
  display: block;
  margin: 0 0 1em;
  padding: 0.6em 1em;
  width: 100%;
  font: inherit;
  font-size: 1em;
  color: inherit;
  background: #fdfdfd;
}

.contact-form textarea {
  height: 15em;
  padding: 1em;
}

.contact-form button, input[type=button]{
  background: #5c5959;
  border: none;
  color: #fdfdfd;
  cursor: pointer;
}

form input[type=text],
form input[type=date],
form input[type=datetime],
form input[type=number],
form input[type=search],
form input[type=time],
form input[type=url],
form input[type=email],
textarea,
select{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border: 1px solid #BEBEBE;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: none;
}


.popup {
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 300ms;
  visibility: hidden;
  opacity: 0;
}

.popup.overlay {
  visibility: visible;
  opacity: 1;
  height: 100%;
}

.popup .message {
  position: relative;
  margin: auto;
  width: 80%;
  max-width: 20em;
  padding: 5em 3em;
  background: rgb(255, 255, 249);
  transition: all 0.2s ease-out;
  text-align: center;
}

.popup h5 {
  font-size: 1.8em;
  line-height: 1.2;
  font-family: Didot, Times, Georgia, serif;
  margin: 0 0 0.5em;
}

.close-popup {
  position: absolute;
  right: 1.5em;
  top: 1.5em;
  display: block;
  width: 1.5em;
  height: 1.5em;
  opacity: 0.5;
  background-image: url('img/icon-cross.png');
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  transition: opacity 0.2s ease-in-out;
}

.close-popup:hover {
  opacity: 0.9;
}

.close-popup span {
  display: none;
}


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

@keyframes fadeOutOpacity {
  0% {
    visibility: visible;
    z-index: 30;
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    visibility: hidden;
    z-index: 30;
    opacity: 0;
  }
}

@keyframes fadeInOutOpacity {
  0% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@media only screen and (max-width: 53rem) {

  #navbar header {
    z-index: 20;
  }

  #navbar nav {
    flex-direction: row-reverse;
    z-index: 10;
  }

  #navbar nav #main-nav {
    display: none;
    z-index: 10;
  }

  #menu-buttons {
    display: flex;
    margin-left: 2em;
    z-index: 20;
  }

  #navbar #lang-nav {
    display: none;
    z-index: 20;
    font-size: 1.4em;
    height: 1em;
    line-height: 1.1em;
  }

  .intro #load-logo {
    font-size: 2vw;
  }

  .intro #load-logo h2 {
    margin: 0 0 0.3em; 
  }

  .intro #load-logo h4 {
    font-size: 1.75em;
  }

  #gallery nav li:hover a span {
    display: none;
  }

  #content, #gallery {
    font-size: 1em;
  }

}

@media only screen and (max-width: 82vh) {

  .work #content nav li a {
    display: block;
    line-height: 1;
  }

  .work #content nav h3 {
    font-size: 0.4em;
  }

  .work #content nav .portfolio h3 {
    color: #ECC001;
  }

  .work #content nav .projects h3 {
    color: #0470B9;
  }

  .one-word {
    white-space: nowrap;
  }

  #footer {
    font-size: 0.65em;
  }

  .about #content img {
    width: 100%;
    max-width: 100%;
  }

  #content, #gallery {
    font-size: 1.3em;
  }

  #gallery section.intro-text h3 {
    font-size: 1.8em
  }

  #gallery section.intro-text p {
    text-align: left;
  }

  #navbar h2 span.title {
    display: none;
  }

  #navbar h2 span.slide-n {
    margin-left: 0;
    font-size: 1.2em;
  }

  #navbar h2 {
    font-size: 1.1em;
  }

  #navbar nav {
    font-family: "Playfair Display", Georgia, Times, serif;
  }

  .intro #load-logo {
    font-size: 2.3vw;
    font-family: "Didot Bold", Didot;
  }

  .do-not-break-2 {
    white-space: normal;
  }

}

@media (hover: none) and (pointer: coarse) and (max-width: 53rem) {
  
  #gallery section.intro-text {
    margin: 0;
  }

  #gallery section.intro-text {
    max-width: 100%;
  }

} 

/*@media (hover: none) and (pointer: coarse) and (max-width: 600px)*/
@media (hover: none) and (pointer: coarse)  {
    
    #gallery nav li {
      display: none;
    }

    #gallery .slide_img {
      /* reset when arrows are not present */
      width: calc(100% - 12vw);
      padding: 0 6vw;
    }

    #gallery section.intro-text {
      margin: auto;
      width: calc(100% - 12vw);
    }

    #gallery section.intro-text div {
      padding: 3% 0;
    }

    #gallery section.intro-text {
      font-size: 1em;
    }

}