/******************* VARIABLES ***********************/
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@800&display=swap");
:root {
  --clr-blackish: #1c1f26; /* also in the shadow of dunes.svg */
  --clr-dark: #02173c; /* 2a579b violet sixties - 002e4b Prussian blue #02263C (2, 38, 60) */
  --clr-middle: #005d97; /* 003d8c blu sixties -Jeans 3083dc - nuovo blu 005d97*/
  --clr-light: #87d7ee; /* 00d1f0 turqoise sixties - 84ceff d2ecfd #c7e9ff */
  --clr-lightest: #c2ecf0; /* super light f0f9ff alice #d2ecfd */
  --clr-accent: #ffff21; /* fuxia: #ff0777 pulcino: FFFF4F giallissimo: #fffb1e #f5ff64 Glacial lime #e5ff00  (243, 243, 206)  */
  --clr-whitish: #fffff1; /* fffdea light Ivory */
  --clr-ivory: #fff6db; /* ivory */
  --clr-redish: #E13551; /* #E0115F ruby #fffdea */
  --ff-default: Arial, Helvetica, Calibri, "Trebuchet MS", Verdana, Sans-serif;
  --ff-serif: Garamond, Palatino, Cambria, Georgia, Baskerville, Cochin,
    "Times New Roman", Times, serif;
  --ff-accent: "Playfair Display", Garamond, Palatino, Cambria, Georgia, Baskerville,
    Cochin, "Times New Roman", Times, serif;
  --fs-large: 14vw;
  --gap-small: 0.5rem;
  --gap-middle: 2.5rem;
  --gap-large: 6rem;
  --gap-nav: 5vw;
  --headings-letter-spacing: -0.08em;
  --trans: 500ms;
  --scale: scale(1.04);
}
@media (min-width: 860px) {
  :root footer {
    --gap-middle: 1rem;
  }
}

/********************** RESETS START *************************/
* {
  box-sizing: border-box;
}

body,
div,
section,
nav,
h1,
h2,
h3,
p,
img,
::before,
::after {
  margin: 0;
  padding: 0;
  border: 0;
}

/*
.wrapper {
   columns: 1;
 }
*/
img,
video,
object,
iframe {
  max-width: 100%; /* never scale up to be larger than its original size */
  height: auto;
}

video,
object,
iframe {
  display: block;
}

ul {
  display: inline-block;
}

nav li {
  list-style-type: none; /* no bullet points */
}

/******** NORMALIZATION END **************/
/*
SUMMARY

- 1. TYPOGRAPHY
		LINKS
- 2. GENERAL LAYOUT
		UTILITY & ANIMATION
- 3. HEADER
		MENU
- 4. FOOTER 
- 5.  INTRO
- 6. SECTIONS
		PORTFOLIO CARDS
		CTA


/*
***
****
*****
******
*******
********
*********
**********
***********
************
/************************* 1. TYPOGRAPHY START *************************/
html {
  /* base default for font-size, word-spacing, letter-spacing... */
  color: var(--clr-middle, #777);
  font-family: var(--ff-default, Sans-serif);
  font-size: 16px;
  font-weight: 300;
  word-spacing: 0.2rem;
  letter-spacing: 0.03rem;
  line-height: 1;
  scroll-behavior: smooth;
}

main {
  --clr-contextual: var(--clr-middle);
  position: relative;
}

.front-page main {
  margin-top: var(--gap-middle, 2rem);
}

.page-template-form-template main {
  margin-top: 0;
}

.noise {
  background: url(../images/noise.jpg);
  height: 100%;
  opacity: 0.08;
  pointer-events: none;
  position: absolute;
  width: 100vw;
  z-index: 100;
}

p {
  color: var(--clr-contextual, #333);
  font-size: 1.3rem;
  line-height: 1.4em;
  padding: 0 0.6em;
}

h1,
h2,
h3,
.menu-item {
  margin-top: 6vh;
  margin-bottom: var(--gap-small, 1rem);
  margin-left: -2px;
  color: var(--clr-contextual, #777);
  font-family: var(--ff-accent, serif);
  font-size: var(--gap-middle, 2.5rem);
  letter-spacing: var(--headings-letter-spacing, 0);
}

.menu-item {
  margin-top: 0;
}

h1,
h2 {
  font-size: var(--fs-large, 15vw);
  margin-top: 4rem;
  display: inline-block;
}

#what h2 {
  margin-top: 0;
}

#about h2 {
  margin-top: 10rem;
}

footer {
  --clr-contextual: var(--clr-light);
  line-height: 0.5em;
}

/************* LINKS *******************/
a,
a:visited {
  display: inline-block;
  padding: 0.2em 0.5em;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  background-color: var(--clr-light, #bbb);
  color: var(--clr-middle, #777);
  font-weight: bold;
  text-decoration: none;
  transition: all 300ms ease;
}

p a:nth-of-type(even),
p a:nth-of-type(even):visited,
a.irregular-bd,
a.irregular-bd:visited {
  border-radius: 352px 6px 357px 28px/23px 36px 22px 126px;
}

/* hover and click on texts overwriting specificity */
::-moz-selection {
  outline-color: var(--clr-accent, yellow) !important;
  outline-width: 6px;
  outline-style: dashed;
  background-color: var(--clr-light, #999) !important;
  color: var(--clr-accent, yellow) !important;
}
p a:active,
p a:hover,
::selection,
:focus {
  outline-color: var(--clr-accent, yellow) !important;
  outline-width: 6px;
  outline-style: dashed;
  background-color: var(--clr-light, #999) !important;
  color: var(--clr-accent, yellow) !important;
}

/* rounding btn */
a.round {
  border-radius: 100%;
  padding: 0;
}

.menu-item a:active,
.menu-item a:hover {
  outline-color: var(--clr-accent, yellow) !important;
  outline-width: 6px;
  outline-style: dashed;
  background: none !important;
  color: var(--clr-accent, yellow) !important;
}

/************* TYPOGRAPHY AND LINKS END *******************/
/*
***
****
*****
******
*******
********
*********
**********
***********
************
/************************* 2. GENERAL LAYOUT START *************************/
/* STICKY FOOTER = uses every available space pushing footer to the bottom even if there isn't enough */
body {
  position: relative;
  display: flex; /* see -> STICKY FOOTER */
  flex-direction: column; /* see -> STICKY FOOTER */
  min-height: 100vh; /* see -> STICKY FOOTER */
  overflow-x: hidden;
  overflow-y: overlay;
  min-width: 100vw;
  overflow-anchor: none;
  background-color: var(--clr-ivory, #fffff1);
}

body.page-template-form-template {
  background-color: var(--clr-dark, #000);
}

main {
  flex-grow: 1; /* see -> STICKY FOOTER */
  display: inline-block;
}

/******************* UTILITY & ANIMATION ***********************/
.bg-middle {
  --clr-contextual: var(--clr-ivory);
  background-color: var(--clr-middle, #777);
}

.bg-dark.bg-dark,
.page-template-form-template .dots {
  --clr-contextual: var(--clr-ivory);
  background-color: var(--clr-dark, #333);
}

.shape {
  stroke: var(--clr-middle, #777);
  stroke-width: 1px;
  fill: transparent;
  transition: all 300ms ease;
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  /* rounded */
  border-radius: 100%;
  font-family: var(--ff-accent, serif);
  font-size: var(--gap-middle, 2.5rem);
  font-weight: 900;
  letter-spacing: var(--headings-letter-spacing, 0);
  transform: scale(1);
  word-spacing: 0;
  transition: all 300ms ease;
}
.btn * {
  transition: all 300ms ease;
}
.btn:hover {
  background-color: var(--clr-light, #aaa);
  transform: var(--scale);
  cursor: pointer;
  color: var(--clr-accent, yellow);
}
.btn:hover * {
  stroke: var(--clr-accent, yellow);
  color: var(--clr-accent, yellow);
}

.small-obj {
  width: 50px;
  height: 50px;
  background-color: var(--clr-light, #aaa);
}

.large-obj {
  width: 160px;
  height: 160px;
  line-height: 0;
}

.large-obj.btn {
  width: 160px;
  height: 160px;
}

.transparent {
  background-color: transparent;
}

.no-mobile {
  display: none;
}

.center {
  display: block;
  text-align: center;
}

.gap {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.small-text {
  font-size: 1rem;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50vh);
  }
}
@keyframes up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50vh);
  }
}
@-webkit-keyframes upBlue {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(-39vh);
  }
}
@keyframes upBlue {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(-39vh);
  }
}
@-webkit-keyframes upMountainLight {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(-64vh);
  }
}
@keyframes upMountainLight {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(-64vh);
  }
}
@-webkit-keyframes upFlag {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(-60vh);
  }
}
@keyframes upFlag {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(-60vh);
  }
}
@-webkit-keyframes upSuccess {
  0% {
    transform: translate(-50%, 0);
  }
  100% {
    transform: translate(-50%, -61vh);
  }
}
@keyframes upSuccess {
  0% {
    transform: translate(-50%, 0);
  }
  100% {
    transform: translate(-50%, -61vh);
  }
}
@-webkit-keyframes toRight {
  50% {
    opacity: 1;
    transform: translateX(0) translateY(0vh);
  }
  65% {
    opacity: 1;
    transform: translateX(0vw) translateY(-10vh) scale(0.6) rotate(-60deg);
  }
  80% {
    opacity: 1;
    transform: translateX(-8%) translateY(50vh) scale(0.6) rotate(-60deg);
  }
  100% {
    opacity: 1;
    transform: translateX(46vw) translateY(-1vh) scale(0.6) rotate(-60deg);
  }
}
@keyframes toRight {
  50% {
    opacity: 1;
    transform: translateX(0) translateY(0vh);
  }
  65% {
    opacity: 1;
    transform: translateX(0vw) translateY(-10vh) scale(0.6) rotate(-60deg);
  }
  80% {
    opacity: 1;
    transform: translateX(-8%) translateY(50vh) scale(0.6) rotate(-60deg);
  }
  100% {
    opacity: 1;
    transform: translateX(46vw) translateY(-1vh) scale(0.6) rotate(-60deg);
  }
}
/*********************** 4. SAFARI ***********************/
@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
    .portfolio > h2 {
      margin-top: 0;
    }
    @-webkit-keyframes upBlue {
      0% {
        opacity: 0;
        transform: translateY(0);
      }
      100% {
        opacity: 1;
        transform: translateY(-55vh);
      }
    }
    @keyframes upBlue {
      0% {
        opacity: 0;
        transform: translateY(0);
      }
      100% {
        opacity: 1;
        transform: translateY(-55vh);
      }
    }
    @-webkit-keyframes upFlag {
      0% {
        opacity: 0;
        transform: translateY(0);
      }
      100% {
        opacity: 1;
        transform: translateY(-50vh);
      }
    }
    @keyframes upFlag {
      0% {
        opacity: 0;
        transform: translateY(0);
      }
      100% {
        opacity: 1;
        transform: translateY(-50vh);
      }
    }
  }
}
/************************* SAFARI END *************************/
/*********** GENERAL LAYOUT END ****************/
/*
***
****
*****
******
*******
********
*********
**********
***********
************
/****************************** 3. HEADER START ******************************/
.arrow-link {
  display: block;
  padding: 0;
}

/************** HAMBURGER MENU NAV START ******************/
/* menu nav button container */
.hamburger {
  position: fixed;
  top: var(--gap-nav, 5vw);
  right: var(--gap-nav, 5vw);
  z-index: 999;
  flex-direction: column;
  justify-content: space-around;
  align-items: stretch;
  padding: 1rem 0.7rem;
  -webkit-animation: fadeIn 250ms ease-out;
          animation: fadeIn 250ms ease-out;
  /* closed X button add by JS */
}
.hamburger__line {
  border-top: 1px solid var(--clr-middle, #777);
  transition: transform 500ms ease;
}
.hamburger:hover .hamburger__line {
  border-top: 1px solid var(--clr-accent, yellow);
}
.hamburger__line:nth-child(1).opened {
  transform: translateY(4px) rotate(43deg);
}
.hamburger__line:nth-child(2).opened {
  transform: translateY(-5px) rotate(-43deg);
}

/* menu items container */
/* see typography section for li elements */
.header-nav {
  position: fixed;
  opacity: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 200%);
          clip-path: polygon(0 0, 100% 0, 100% 200%);
  transition: 100ms ease-out;
  transform: translateX(100vh);
  transform-origin: bottom right;
}
.header-nav.opened {
  z-index: 9;
  opacity: 1;
  background-color: var(--clr-light);
  transform: translateX(0);
}

/* menu items ul list */
.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  align-items: flex-end;
  padding-top: calc(var(--gap-nav, 5vw) * 4.5);
}
.menu a {
  margin-right: var(--gap-nav, 5vw);
}

/* ! do not change class id name: is connected to a js function! */
#arrowButton, #rightButton {
  position: fixed;
  right: var(--gap-nav, 5vw);
  bottom: var(--gap-nav, 2rem);
  z-index: 10;
  -webkit-animation: fadeIn 3000ms ease-in-out;
          animation: fadeIn 3000ms ease-in-out;
}
#arrowButton.up, #rightButton.up {
  transform: rotate(180deg);
}

#leftButton {
  position: fixed;
  left: 5vw;
  bottom: var(--gap-nav, 2rem);
  z-index: 10;
  -webkit-animation: fadeIn 3000ms ease-in-out;
          animation: fadeIn 3000ms ease-in-out;
}

.arrow-container {
  width: 60%;
  height: 104%;
}

/**************** HEADER END *******************/
/*
***
****
*****
******
*******
********
*********
**********
***********
************
/************************* 4. FOOTER START *************************/
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: calc(var(--gap-small) * 2);
  padding: 0 0 var(--gap-middle) 0;
  background-color: var(--clr-middle, #777);
}
footer h1,
footer h2 {
  /* avoiding space created by widget_tag_cloud h2 */
  margin-top: 0;
}
footer a,
footer a:visited {
  padding: 0.3em;
  font-weight: 500;
  background: none;
  color: var(--clr-ivory, white);
  transition: all 500ms ease !important;
}
footer p {
  text-align: center;
}

.yellow-hover a:hover,
.yellow-hover a:active {
  background: none !important;
  color: var(--clr-accent, yellow) !important;
}

.dots {
  height: 368px;
  margin-top: -1px;
  background-color: var(--clr-ivory, rgb(248, 252, 214));
  background-image: url(../images/dots-light.png);
  -ms-grid-row-align: stretch;
  align-self: stretch;
}

/* heart ico svg */
.copyleft__heart {
  fill: var(--clr-light, #aaa);
}
.copyleft__cc {
  fill: var(--clr-witish, #fff);
}
.copyleft__link:hover {
  background: none;
}

/**************** FOOTER END *******************/
/*
***
****
*****
******
*******
********
*********
**********
***********
************
/**************************** 5. INTRO START ****************************/
.hero {
  display: flex;
  align-items: flex-start;
  height: 101vh;
  padding-top: 0;
  padding-bottom: 0;
  z-index: -1;
}

#slogan {
  position: -webkit-sticky;
  position: sticky;
  /* not possible vertical centering because the address on mobile   */
  top: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: calc(var(--gap-nav, 5vw) * 0.7);
  padding-bottom: var(--gap-large);
  color: var(--clr-middle, #777);
  font-size: 15vw;
  line-height: 1.2;
  max-width: 6ch;
}

.chars {
  opacity: 0;
  transition: opacity 0.4ms ease-in;
}
.chars.fade {
  opacity: 1;
}

/************* INTRO END *****************/
/*
***
****
*****
******
*******
********
*********
**********
***********
************
/***************** 6. SECTIONS START **********************/
section {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  position: relative;
  z-index: 0;
}

#what {
  top: 2vh;
  padding-bottom: 20vh;
  z-index: 1;
}

.blue-mountains {
  position: absolute;
  width: 100vw;
  height: 100vh;
  left: 0;
  right: 0;
  background-image: url(../images/blue-mountain.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: -26vh 0;
  -webkit-animation: upBlue 1s cubic-bezier(0, 0, 0, 1) 2500ms forwards;
  animation: upBlue 1s cubic-bezier(0, 0, 0, 1) 2500ms forwards;
  z-index: 1;
  overflow-x: hidden !important;
}

.what-container::before {
  content: "";
  position: absolute;
  top: -2rem;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(../images/light-mountain-mobile.svg);
  background-repeat: no-repeat;
  background-position: right -7rem top;
  background-size: max(100vw, 1200px);
  -webkit-animation: upMountainLight 500ms cubic-bezier(0, 0, 0, 1) 3000ms forwards;
  animation: upMountainLight 500ms cubic-bezier(0, 0, 0, 1) 3000ms forwards;
  overflow-x: hidden !important;
}

.what-bg-gradient {
  opacity: 0;
  content: "";
  position: absolute;
  top: -80vh;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(170deg, rgba(255, 246, 219, 0) 20%, rgb(255, 246, 219) 30%, rgb(141, 214, 235) 50%, rgb(255, 246, 219) 94%);
  z-index: -1;
  -webkit-animation: fadeIn 5s forwards;
          animation: fadeIn 5s forwards;
}

.wonder-woman {
  opacity: 0;
  position: absolute;
  top: 20vh;
  -webkit-animation: toRight 3500ms ease-in-out 3s forwards;
          animation: toRight 3500ms ease-in-out 3s forwards;
  z-index: 9;
}

a#wonder-link {
  padding: 0;
}

.flag {
  opacity: 0;
  content: url(../images/flag.png);
  position: absolute;
  left: 4vh;
  top: 12vh;
  -webkit-animation: upFlag 1s cubic-bezier(0, 0, 0, 1) 2500ms forwards;
          animation: upFlag 1s cubic-bezier(0, 0, 0, 1) 2500ms forwards;
}

.success {
  content: url(../images/successo.png);
  position: absolute;
  left: 75%;
  top: -2vh;
  -webkit-animation: upSuccess 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 3000ms forwards;
          animation: upSuccess 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 3000ms forwards;
}

.about-container {
  margin-top: 6rem;
}

#portfolio {
  margin-bottom: 3rem;
  z-index: 1;
}

#about {
  --clr-contextual: var(--clr-ivory, #aaa);
}

#contacts {
  background-color: var(--clr-ivory, #aaa);
}

#contacts > h2, #contacts > h3, #contacts > p {
  color: var(--clr-middle, #000);
}

.about {
  padding-top: 5rem;
  padding-bottom: 20vh;
  background-image: url(../images/dunes-mobile.svg);
  background-repeat: no-repeat;
  background-color: var(--clr-dark, #000);
}

.number {
  position: absolute;
  top: -4vh;
  opacity: 0.05;
  color: var(--clr-ivory, white);
  font-size: 33rem;
  line-height: 1;
  z-index: -1;
}

.article1 span.number {
  left: -3vw;
}

.article2 span.number {
  top: 25%;
  right: 10vw;
}

.article3 span.number {
  top: 45%;
  right: 43vw;
}

#about .number {
  line-height: 2;
}

#sunButton {
  transition: transform 2000ms cubic-bezier(0, 0, 0, 1);
  transform: translateY(45vh);
  color: var(--clr-ivory, white);
  background-color: var(--clr-redish, #777);
}
#sunButton.rise {
  transform: translateY(0vh);
}

.cv {
  padding: 4vh 0 3vh 0;
}

section.contacts .cta {
  /* balancing the section padding right to center the CTA */
  margin: 60px auto 10px auto;
}

/******** GALLERY PORTFOLIO CARDS START ***********/
.card {
  padding-bottom: calc(var(--gap-middle, 2.5rem) / 2);
  /* link border around thumbnails */
  /* ! DO NOT CHANGE .more-link: is a WP class! */
}
.card img {
  border-radius: 50%;
}
.card__image {
  margin: -1.3rem auto 0;
}
.card__image-link {
  padding: 1em;
  border-radius: 50%;
}
.card__container {
  /* to avoid little separation from the text */
  margin-bottom: -2px;
  /* stretch vertically because if not the are hhigher than the thumb */
  height: auto;
}
.card__excerpt {
  margin: 0 0.5em;
}
.card__title-link.card__title-link {
  background-color: unset;
  padding: 0;
}
.card__excerpt p:first-child {
  font-size: 1rem;
}
.card .more-link {
  margin-left: -3px;
  font-size: 1rem;
  background: none;
}

section.contacts {
  overflow: hidden;
  margin-top: -40px;
  padding-bottom: var(--gap-middle, 2.5rem);
}

/*************** SECTIONS END ******************/
/*
***
****
*****
******
*******
********
*********
**********
***********
************
/***************** 6. POST START **********************/
#content {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

/*************** SINGLE POST END ******************/
/*

SUMMARY

- 1.  MEDIA FROM 380
- 1.  MEDIA FROM 560
- 1B. MEDIA FROM 700
- 2.  MEDIA FROM 860
- 3.  MEDIA FROM 980
- 4.  MEDIA FROM 1280
- 5.  MEDIA FROM 1520
- 6.  MEDIA FROM 1920
- 7.  MEDIA FROM 2560
- 8.  SAFARI
*/
/*
**
***
****
*****
******
*******
********
*********
**********
***********
************
/*********************** 1. MEDIA FROM 380 START *************************/
@media (min-width: 380px) {
  .menu-item {
    margin-top: 4vh;
  }
  .wonder-woman {
    top: 16vh;
  }
  @-webkit-keyframes toRight {
    50% {
      opacity: 1;
      transform: translateX(0) translateY(0vh);
    }
    65% {
      opacity: 1;
      transform: translateX(0vw) translateY(-10vh) scale(0.6) rotate(-60deg);
    }
    80% {
      opacity: 1;
      transform: translateX(-8%) translateY(50vh) scale(0.6) rotate(-60deg);
    }
    100% {
      opacity: 1;
      transform: translateX(46vw) translateY(8vh) scale(0.6) rotate(-60deg);
    }
  }
  @keyframes toRight {
    50% {
      opacity: 1;
      transform: translateX(0) translateY(0vh);
    }
    65% {
      opacity: 1;
      transform: translateX(0vw) translateY(-10vh) scale(0.6) rotate(-60deg);
    }
    80% {
      opacity: 1;
      transform: translateX(-8%) translateY(50vh) scale(0.6) rotate(-60deg);
    }
    100% {
      opacity: 1;
      transform: translateX(46vw) translateY(8vh) scale(0.6) rotate(-60deg);
    }
  }
  #what {
    top: -5vh;
  }
}
/*
**
***
****
*****
******
*******
********
*********
**********
***********
************
/*********************** 1. MEDIA FROM 560 START *************************/
@media (min-width: 560px) {
  html {
    font-size: 18px;
  }
  #slogan {
    font-size: 10vw;
  }
  #about h2 {
    margin-top: 12rem;
  }
  .hero {
    width: auto;
  }
  .wonder-woman {
    left: 0;
  }
  .section-container::before {
    top: -10vw;
  }
  .flag {
    left: 9vw;
  }
  .success {
    left: unset;
    right: 10vw;
    top: -10vw;
  }
  #what {
    top: 0;
  }
  @-webkit-keyframes upSuccess {
    100% {
      transform: translateY(-45vh);
    }
  }
  @keyframes upSuccess {
    100% {
      transform: translateY(-45vh);
    }
  }
  @-webkit-keyframes toRight {
    50% {
      opacity: 1;
      transform: translateX(0) translateY(0vh);
    }
    65% {
      opacity: 1;
      transform: translateX(0vw) translateY(-10vh) scale(0.6) rotate(-60deg);
    }
    80% {
      opacity: 1;
      transform: translateX(-8%) translateY(50vh) scale(0.6) rotate(-60deg);
    }
    100% {
      opacity: 1;
      transform: translateX(60vw) translateY(8vh) scale(0.6) rotate(-60deg);
    }
  }
  @keyframes toRight {
    50% {
      opacity: 1;
      transform: translateX(0) translateY(0vh);
    }
    65% {
      opacity: 1;
      transform: translateX(0vw) translateY(-10vh) scale(0.6) rotate(-60deg);
    }
    80% {
      opacity: 1;
      transform: translateX(-8%) translateY(50vh) scale(0.6) rotate(-60deg);
    }
    100% {
      opacity: 1;
      transform: translateX(60vw) translateY(8vh) scale(0.6) rotate(-60deg);
    }
  }
}
/*
**
***
****
*****
******
*******
********
*********
**********
***********
************
/*********************** 1B. MEDIA FROM 700 START *************************/
@media (min-width: 700px) {
  #slogan {
    font-size: 8vw;
  }
  .section-container::before {
    top: -10vw;
  }
  .wonder-woman {
    top: 19vh;
  }
  .flag {
    top: 14vh;
    left: 6vh;
  }
  .success {
    top: -6vw;
  }
  #what {
    top: -2vh;
    top: min(-2vh, 400px);
  }
  @-webkit-keyframes upSuccess {
    0% {
      transform: translate(-50%, 0);
    }
    100% {
      transform: translate(-15%, -60vh);
    }
  }
  @keyframes upSuccess {
    0% {
      transform: translate(-50%, 0);
    }
    100% {
      transform: translate(-15%, -60vh);
    }
  }
}
/***********************  700 END *************************/
/*
**
***
****
*****
******
*******
********
*********
**********
***********
************
/*********************** 2. MEDIA FROM 860 START *************************/
@media (min-width: 860px) {
  p {
    padding: 0;
  }
  .only-mobile {
    display: none;
  }
  /*************** HEADER ******************/
  #slogan {
    font-size: 5.5vw;
  }
  #what {
    top: 2vh;
  }
  .success {
    top: -7vh;
    right: 13vh;
  }
}
/************ 860 END **************/
/*
***
****
*****
******
*******
********
*********
**********
***********
************
/*********************** 3. MEDIA FROM 980 START ***********************/
@media (min-width: 980px) {
  /********** GENERAL LAYOUT **************/
  html {
    font-size: 16px;
  }
  .wrapper.wrapper {
    max-width: 72%;
    margin-left: auto;
    margin-right: auto;
  }
  h1, h2 {
    font-size: 8vw;
  }
  #slogan {
    font-size: none;
    max-width: none;
  }
  .front-page .wrapper {
    max-width: calc(68% + 5vw);
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }
  /* general margins for content */
  section.front-page {
    /* ! watch out! CTA depends by those sizes! */
    padding-left: 5vw;
    padding-right: 15vw;
  }
  .home h1 {
    --clr-contextual: var(--clr-ivory);
  }
  /************* HEADER ******************/
  /* menu items ul list */
  .menu {
    padding-top: calc(var(--gap-nav, 5vw) * 2);
    padding-right: calc(var(--gap-nav, 5vw) + var(--gap-small, 1rem));
  }
  .menu-item {
    margin-top: calc(var(--gap-middle) / 4);
  }
  .header-nav {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 80% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 80% 100%);
  }
  .wonder-woman {
    top: 9vh;
    left: 10vh;
  }
  @-webkit-keyframes upMountainLight {
    0% {
      opacity: 0;
      transform: translateY(0);
    }
    100% {
      opacity: 1;
      transform: translateY(-80vh);
    }
  }
  @keyframes upMountainLight {
    0% {
      opacity: 0;
      transform: translateY(0);
    }
    100% {
      opacity: 1;
      transform: translateY(-80vh);
    }
  }
  .what-container {
    margin-top: -3rem;
  }
  .what-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../images/light-mountain.svg);
    background-repeat: no-repeat;
    background-position: right -4rem top;
    background-size: max(102vw, 1200px);
    -webkit-animation: upMountainLight 500ms cubic-bezier(0, 0, 0, 1) 3000ms forwards;
    animation: upMountainLight 500ms cubic-bezier(0, 0, 0, 1) 3000ms forwards;
    overflow: hidden !important;
  }
  .blue-mountains {
    top: -5vh;
  }
  .flag {
    top: 2vh;
    left: 7vh;
  }
  .success {
    top: -2vh;
    right: 10vh;
  }
  @-webkit-keyframes upSuccess {
    0% {
      transform: translate(-50%, 0);
    }
    100% {
      transform: translate(-50%, -66vh);
    }
  }
  @keyframes upSuccess {
    0% {
      transform: translate(-50%, 0);
    }
    100% {
      transform: translate(-50%, -66vh);
    }
  }
  /***************** SECTIONS *****************/
  section {
    padding-left: 5vw;
  }
  #contact-page-section {
    padding-left: 0;
  }
  #what {
    top: calc(59vw - 63vh);
    padding-bottom: 30vh;
  }
  #about h2 {
    margin-top: 10rem;
  }
  #portfolio {
    margin-top: 20vh;
    margin-top: min(20vh, 85px);
    margin-bottom: 0;
    background: linear-gradient(0deg, rgb(255, 246, 219) 26%, rgb(0, 93, 151) 83%);
  }
  #portfolio::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2rem;
    bottom: 0;
    width: 105vw;
    background-image: url(../images/bg-clouds-top.svg);
    background-repeat: no-repeat;
    z-index: -1;
  }
  #portfolio > h2, #portfolio > p {
    color: var(--clr-ivory, #333);
  }
  .articles {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 5rem;
    height: 45vh;
    max-height: 260px;
  }
  .what .articles {
    margin-top: 3vh;
  }
  .what .article1 {
    align-self: baseline;
  }
  .article.article3 {
    flex-grow: 0.9;
  }
  .articles span.number {
    margin-top: -12vh;
    font-size: 37rem;
    line-height: 0.4;
  }
  .article1 span.number {
    margin-top: 24vh;
    left: 0;
  }
  .article {
    flex: 0 0 32vw;
  }
  .about-container {
    margin-top: 0;
  }
  .about {
    padding-top: 20rem;
    padding-bottom: max(30rem, 35vw);
    background-image: url(../images/dunes.svg);
    background-color: transparent;
    background-size: cover;
    background-position: -26vh 0;
  }
  #about > p:nth-of-type(1) {
    margin-right: 25vw;
  }
  #about .number {
    margin-top: 53vh;
    font-size: 37rem;
    line-height: 0;
  }
  #about .article1 span.number {
    margin-top: 100vh;
  }
  #about .article3 span.number {
    margin-top: 53vh;
    right: 40vw;
  }
  p.cv {
    padding: 0.7rem 0 1rem 0;
    text-align: left;
  }
  /************ CTA ****************/
  section.contacts .cta {
    /* balancing the section padding right to center the CTA */
    margin: 10vh -15.5vw 10px -5vw;
  }
  /****** GALLERY PORTFOLIO CARDS **********/
  .cards {
    margin-top: 12vh;
    margin-bottom: 15vh;
  }
  @-webkit-keyframes fadeOnlyIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes fadeOnlyIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes rotateLeft {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(359.9deg);
    }
  }
  @keyframes rotateLeft {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(359.9deg);
    }
  }
  @-webkit-keyframes rotateRight {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-359.9deg);
    }
  }
  @keyframes rotateRight {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-359.9deg);
    }
  }
  .card {
    display: flex;
    padding-top: 13rem;
    padding-bottom: 4rem;
    margin-left: auto;
    margin-right: 0;
    position: relative;
    /* first row with image to the right */
  }
  .card:nth-child(even) {
    flex-direction: row-reverse !important;
    margin-left: 0;
    margin-right: auto;
  }
  .card__container {
    position: relative;
    flex-basis: 80%;
    display: flex;
    flex-direction: column;
    max-width: 70ch;
  }
  .card__container::after {
    opacity: 0;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--clr-light, #aaa);
  }
  .card__container > h3 {
    align-self: flex-start;
    margin-top: 0;
  }
  .card__image {
    margin: 0;
  }
  .card__excerpt p:first-child {
    font-size: 0.8rem;
  }
  .card:nth-child(odd) > .card__container {
    text-align: right;
  }
  .card:nth-child(even) > .card__container > h3 {
    align-self: flex-end;
  }
  .card .more-link {
    margin: 0;
    background: unset;
  }
  .card__image-link {
    padding: 0.1em;
  }
  .card:hover:nth-child(even) img, .card:active:nth-child(even) img {
    -webkit-animation: rotateLeft 500ms ease 1 forwards;
            animation: rotateLeft 500ms ease 1 forwards;
    mix-blend-mode: normal;
  }
  .card:hover:nth-child(odd) img, .card:active:nth-child(odd) img {
    -webkit-animation: rotateRight 500ms ease 1 forwards;
            animation: rotateRight 500ms ease 1 forwards;
    mix-blend-mode: normal;
  }
  .card:hover .card__image-link, .card:active .card__image-link {
    border-radius: 0 50% 50% 50%;
  }
  .card:nth-child(even) .card__image-link {
    border-radius: 50%;
  }
  .card:nth-child(even):hover .card__image-link, .card:nth-child(even):active .card__image-link {
    border-radius: 50% 0 50% 50%;
  }
  .card:hover .card__container::after, .card:active .card__container::after {
    -webkit-animation: fadeOnlyIn 2000ms ease forwards;
            animation: fadeOnlyIn 2000ms ease forwards;
  }
  .card:hover h3 > a, .card:active h3 > a {
    border-radius: 0% 0% 0.6rem 0.6rem;
  }
  .cards > article:nth-of-type(1) {
    --clr-contextual: var(--clr-ivory);
  }
  .cards > article:nth-of-type(1) a {
    color: var(--clr-contextual) !important;
  }
  .cards > article:nth-of-type(2) .card__image a {
    background-color: var(--clr-ivory, #bbb);
  }
  .cards > article:nth-of-type(2) > .card__container::after {
    background-color: var(--clr-ivory, #bbb);
  }
  .cards > article:nth-of-type(2)::before {
    content: "";
    position: absolute;
    top: 0;
    left: -5vw;
    bottom: -15rem;
    right: 0;
    width: 115vw;
    background: url("../images/cloud-2.svg");
    background-repeat: no-repeat;
    background-size: 111%;
    z-index: -1;
  }
  .home .cards > article:nth-of-type(2)::before {
    top: -4vw;
  }
  .cards > article:nth-of-type(3)::before {
    content: "";
    position: absolute;
    top: -7rem;
    left: -5rem;
    bottom: -2rem;
    right: 0;
    width: 110vw;
    background: url("../images/cloud-3.svg");
    background-repeat: no-repeat;
    background-size: 123%;
    z-index: -1;
  }
  .home .cards > article:nth-of-type(3)::before {
    top: -9rem;
  }
}
/*********** 980 END ***********/
/*
***
****
*****
******
*******
********
*********
**********
***********
************
/*********************** 4. MEDIA FROM 1100 START ***********************/
@media (min-width: 1100px) {
  .blue-mountains {
    top: 6vh;
  }
  .flag {
    top: 15vh;
  }
  #what {
    top: 24vw;
    top: min(24vw, 900px);
  }
}
/*
***
****
*****
******
*******
********
*********
**********
***********
************
/*********************** 4. MEDIA FROM 1280 START ***********************/
@media (min-width: 1280px) {
  .front-page main {
    margin-top: 5rem;
  }
  .what-container {
    margin-top: 0;
  }
  #about .articles {
    max-height: 220px;
    margin-top: 2rem;
  }
  #what {
    top: 24vh;
  }
  .blue-mountains {
    top: -2vh;
    width: 120vw;
  }
  .flag {
    top: 10vh;
  }
  .wonder-woman {
    top: 18vh;
    left: 13vw;
  }
  #portfolio {
    margin-top: 20vh;
    margin-top: min(20vh, 150px);
  }
  #portfolio > h2 {
    margin-top: 6vw;
  }
  .cards {
    margin-top: 10vw;
  }
  #contacts br {
    display: none;
  }
}
/*********** 1280 END ***********/
/*
***
****
*****
******
*******
********
*********
**********
***********
************
/*********************** 5. MEDIA FROM 1520 START ***********************/
@media (min-width: 1520px) {
  /************ GENERAL LAYOUT **************/
  html {
    font-size: 18px;
  }
  .hamburger {
    padding: 1.1rem 0.5rem;
    /* closed X button add by JS */
  }
  .hamburger__line:nth-child(1) {
    padding-bottom: 0.2rem;
  }
  .hamburger__line:nth-child(1).opened {
    transform: translateY(3px) rotate(43deg);
  }
  .hamburger__line:nth-child(2).opened {
    transform: translateY(-4px) rotate(-43deg);
  }
  #arrowButton, #rightButton, #leftButton {
    padding: 1.1rem 0.5rem;
  }
  .arrow-container {
    width: auto;
    height: auto;
  }
  .hero h1 {
    margin: 0;
  }
  /************ SECTIONS **************/
  .wonder-woman {
    top: 11vh;
    left: 16vw;
  }
  #what {
    top: 32vh;
  }
  .section-container::before {
    top: -6vw;
  }
  .flag {
    top: 8vh;
    left: 10vh;
  }
  .success {
    top: -10vh;
    right: 14vh;
  }
  .portfolio {
    margin-top: 32vh;
  }
  .article {
    flex: 0 0 33vw;
  }
  #portfolio {
    margin-top: 30vh;
    margin-top: min(30vh, 250px);
  }
  #portfolio > h2 {
    margin-top: 8rem;
  }
  #portfolio::before {
    top: -6rem;
  }
  .cards {
    margin-top: 3vw;
    padding-top: 3rem;
  }
  .card {
    padding-top: 15rem;
  }
  /**************** CTA *********************/
  .btn {
    font-size: 2.2rem;
  }
  .contacts p {
    padding-bottom: 30vh;
  }
  section.contacts .center {
    position: absolute;
    margin: -20vh 0 0 0;
    /*  center the CTA */
    left: 50%;
    transform: translateX(-50%);
  }
}
/********** 1520 END **************/
/*
***
****
*****
******
*******
********
*********
**********
***********
************
/************************* 6. MORE THAN 1920 START *************************/
@media (min-width: 1920px) {
  html {
    font-size: 22px;
  }
  h1, h2, #slogan {
    font-size: calc(var(--gap-middle, 2.5rem) * 2);
  }
  /* closed X button add by JS */
  .hamburger__line:nth-child(1).opened {
    transform: translateY(2px) rotate(43deg);
  }
  .hamburger__line:nth-child(2).opened {
    transform: translateY(-3px) rotate(-43deg);
  }
  .menu {
    padding-top: calc(var(--gap-nav, 5vw) * 1.3);
    padding-right: calc(var(--gap-nav, 5vw) * 1.4);
  }
  .menu a {
    margin-right: 0;
    font-size: 2rem;
  }
  #what {
    top: 38vh;
  }
  section.contacts {
    margin-top: -50px;
  }
  .portfolio {
    margin-top: 50vh;
  }
  #portfolio::before {
    top: -8rem;
  }
  .home #portfolio::before {
    top: -10rem;
  }
  .cards {
    margin-top: 0;
  }
  .wonder-woman {
    top: 12vh;
    left: 17vw;
  }
  .flag {
    top: 10vh;
    left: 11vh;
  }
  .success {
    right: 20vh;
  }
  .mountain1 {
    height: 80vh;
  }
  .btn {
    font-size: 1.8rem;
  }
  .card__excerpt p {
    line-height: 1.2;
  }
}
/************************* MORE THAN 1920 END *************************/
/*
***
****
*****
******
*******
********
*********
**********
***********
************
/************************* 7. MORE THAN 2560 START *************************/
@media (min-width: 2560px) {
  html {
    font-size: 24px;
  }
  #about h2 {
    margin-top: 12rem;
  }
  /* closed X button add by JS */
  .hamburger__line:nth-child(1).opened {
    transform: translateY(2px) rotate(43deg);
  }
  .hamburger__line:nth-child(2).opened {
    transform: translateY(-4px) rotate(-43deg);
  }
  .flag {
    top: 12vh;
  }
  .success {
    top: -13vh;
  }
  #about > p:nth-of-type(1) {
    margin-right: 34vw;
  }
  #about .articles {
    margin-top: 10rem;
  }
  .card {
    padding-top: 21rem;
  }
}
/************************* MORE THAN 2560 END *************************/
/*
***
****
*****
******
*******
********
*********
**********
***********
************
/*********************** 4. SAFARI ***********************/
@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
    .section-container::before {
      display: none;
    }
  }
}
/************************* SAFARI END *************************//*# sourceMappingURL=main.css.map */