html {
  scroll-behavior: smooth;
}

/* · · · · · OVERRIDES · · · · · */

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

a, a:link, a:active, a:visited {
  text-decoration: none;
  cursor: none;
}

ol, ul, li {
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: rgb(247,247,247);
  background-color: #EEEEEE;
  font-family:'Neuzeit S LT', sans-serif;
  transition: background-color 200ms ease-out;
}


/* · · · · · TOP HEADER · · · · · */
  header {
  background-color: black;
  color: white;
  position: fixed;
  top: -80px;
  left: 0;
  transition: all .5s cubic-bezier(0.80, 0.80, 0, 0.99);

  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-evenly;

  width: 100%;
  height: 80px;
  letter-spacing: 1px;
  font-size: 18px;
  text-align: center;
  z-index: 9000;

  animation-name: header-appear;
  animation-duration: 1600ms;
  animation-timing-function: cubic-bezier(0.7, 0.50, 0, 1);
  animation-delay: 300ms;
  animation-fill-mode: forwards;
}

@keyframes header-appear {
  0% {
    opacity: 0;
    top: -80px;
  }
  50% {
    opacity: .5;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}

/* Cesar Gomez */
header div span:nth-child(1) {
  font-size: 18px;
}


/* header - hola@cesar-gomez.com & linkedin url */
header a {
  /* if the a element is changed to display: block, it has to float in order to align correctly with the flex parent */
  display: block;
  float: left;
  border: none;
  width: auto;
  font-size: inherit;
  color: white;
}


/* header - clover separator */
header div::before {
  content: '♣';
  color: #2AF598;
  color: limegreen;
  font-size: 16px;
  line-height: 18px;
  font-family:serif;
  display: block;
  margin-right: 10px;
  float: left;
}

/* header - ace separator */
header div.dark::before {
  color: #D13C36;
  content: '♠';
  letter-spacing: 0;
  font-size: 16px;
  line-height: 1.2;
  display: block;
  float: left;
  font-family: monospace;
}

/* header - erase 1º & separator */
header div:first-child::before {
  content: '';
}

/* header - Cesar Gomez */
header div:first-child {
  font-size: 22px;
  letter-spacing: 0px;
}

/* header - already shrink */
.shrink {
  height: 40px;
  position: fixed;
  font-size: 14px;
  line-height: 23px; /* for the icons on the left */
  color: black;
  background-color: white;
  padding:10px 0;
  box-shadow: 0px 5px 20px rgba(0,0,0,.06);
  transition: all 0.6s cubic-bezier(0.83, 0, 0.17, 1);
}

/* links in header when shrink (to smoothly transition them) */
.shrink a {
  color: black;
  cursor: pointer;
  transition: color 0.6s cubic-bezier(0.83, 0, 0.17, 1);
}

/* header - progress line */
.progress-line {
  height: 3px;
  background-color: black;
  position: absolute;
  left: 0;
  bottom: 0;
}

/* header - disable scroll */
/*
.disable-scroll {
  overflow: hidden;
  height: 100%;
}
*/

/* video - pause */
.vtag, .atag {
  position: absolute;
  top: 40%;
  left: 100%;
  width: auto;
  height: auto;
  min-width: 80px;
  min-height: 40px;
  color: white;
  font-family: 'Neuzeit S LT', sans-serif;
  font-size: 16px;
  text-align: left;
}


.vtag:hover, .atag:hover {
  cursor: pointer;
  color:black;
}

/* overwrite a styles */
.atag a:link, .atag a:active, .atag a:hover, .atag a:visited  {
  cursor: pointer;
  color: black;
}


.vtag > span {
  width: 1px;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  background-color: white;
  transition:all 270ms cubic-bezier(1, 0.4, 0, 0.6);
  transition-delay: 50ms;
}

.vtag > span.full {
  width: 120%;
}

.vtag > span.full + span.play { /*next selector*/
  padding-left: 0;
}

.vtag span.play {
  height: auto;
  padding-bottom: 10px;
  padding-left: 35px;
  background-color: rgba(0,0,0,0);
}

/* website tag */
.atag {
  background-color: white;
  color: black;
  padding: 15px;
  font-size: 16px;
}

/* override a tag */
/*
.atag a,
.atag a:hover,
.atag a:active,
.atag a:visited {
color: inherit;
cursor: pointer;
}*/

/* app tag */
.atag {
  color: black;
  width: 100px;
  padding: 10px 0 0 15px;
  cursor: pointer;
}

/* · · · · · MAIN - overall wrapper · · · · · */
.main {
  width: 100%;
  min-width: 375px;
  height: auto;
  position: absolute;
  top:0;
  left:0;
  background-color: white;
  transition: background-color 380ms cubic-bezier(0, 0.43, 1, 0.44);
}

/* the intro text */
#introtext {
  margin-top: 100px;
  padding: 3rem;
  color: white;
  line-height: 2.5rem;
  font-size: 1.5rem;
    
    /* margin between p elements in intro text */
    p {
      margin-top: 2.5rem;
    }

    /* remove top-margin from first one */
    p:first-child {
      margin-top: 0;
    }

    p:last-child {
      margin-bottom: 4rem;
    }

}

/* main - title container */
.project-title-container {
  position: fixed;
  right: 5%;
  left: 5%;
  bottom: 5%;
  z-index: 3000;
  transition: all 150ms cubic-bezier(0.60, 0.35, 0.20, 0.80);
}

/* main - title container HOVER  */
.project-title-container-full {
  bottom: 130px;
  bottom: 150px;
  /* distance of the title on hover from the bottom */
}

/* main - title */
.project-title {
  font-family: 'Vidaloka', serif;
  font-size: 60px;
  letter-spacing: -.03em;
  text-transform: capitalize;
  font-weight: 400;
  position: relative;
  z-index: 4000;
  padding-right: 10%;
  padding-bottom: 1.5%;
  padding-top: 1.5%;
  text-align: right;
  transition: all 350ms ease-in-out;
  display: block;
  line-height: normal;
  height: auto;
  opacity: 0.5;

  animation-name: title-fade;
  animation-duration: 2s;
  animation-fill-mode:forwards;
  animation-timing-function: ease-out;
}

@keyframes title-fade {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  80% {
    opacity: .1;
  }
  100% {
    opacity: .5;
  }
}

.project-title-full {
  font-size: 35px;
  opacity: 1;
  margin-top: -10px;
  animation-fill-mode:backwards;
}

/* main - title underline */
.project-title-container .title-line {
  width: 100%;
  height: 2%;
  position: absolute;
  bottom: 0;
  right: 0;
  transition: all 350ms cubic-bezier(0.54, 0.55, 0, 0.99);
  transition-delay: 100ms;
}

/* main - projects wrapper */
.project {
  height:auto;
  width:80%;
  margin: 0 auto;
  position: relative;
}

/* main - project, each image  */
.main div {
  position: relative;
}

/* small images */
.half {
  width: 50%;
  float: left;
  clear: none;
}

/* grey background for iframe */
.grey {
  position: relative;
  width: 100%;
  min-height: 900px;
  height: auto;
  background-color: rgb(234, 231, 231);
}

/* white background for iframe */
.ghostwhite-iframe {
  position: relative;
  width: 100%;
  min-height: 900px;
  background-color: ghostwhite;
}

/* for olympus tours */
iframe {
  position: absolute;
  width: 125%;
  height: auto;
  min-height: 1002px;
  border: none;
  margin-top: -40px;
  margin-left: -13%;
  display: block;
  transform: scale(0.65);
}

.iframe-figma {
  width: 100%;
  height: auto;
  min-height: 900px;
  margin: 0 auto;
  transform: scale(1,1);
}

/* for morgan stanley 1 */
iframe.iframe-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 1000px;
  border: none;
  display: block;
  transform: scale(0.7);
  transform-origin: center;
  margin-top: -40px;
  margin-left: 0;
}

/* iframe shadow */
.main div.shadow {
  position: absolute;
  bottom: 6%;
  left: -9.5%;
  width: 120%;
  height: 60px;
  background: radial-gradient(rgba(0,0,0,.15), rgba(0,0,0,0), rgba(0,0,0,0) );
  border-radius: 50%;
}

/* browser graphic */
.main div.iframe-nav-bar {
  height: 25px;
  background-color: lightgray;
  position: absolute;
  top: 111px;
  left: 8.8%;
  right: 9.8%;
}

/* browser buttons graphic */
.b1, .b2, .b3 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
  margin-top: 8px;
  margin-left: 10px;
  float: left;
}

.b2 {background-color: orange; margin-left: 5px}

.b3 {background-color: limegreen; margin-left: 5px}

.s2 {transform: scale(1,.5);}

/* main - space between projects */
.project-separator {
  width: 150px;
  height: 150px;
  clear: both;
  margin:300px auto;
  border-radius: 50%;
  background-color: white;
  transform-origin: center;

  animation-name: separator-appear;
  animation-duration: 1100ms;
  animation-delay: 1000ms;
  animation-timing-function: ease-out;
}

@keyframes separator-appear {
  0% {
    width: 0;
    height: 0;
    margin:420px auto;
  }
  100% {
    width: 150px;
    height: 150px;
    margin:380px auto;
  }
}

/* main - generic placeholder */
.placeholder {
  position:relative;
  width: 100%;
  min-height: 600px;
  background-color: rgba(0,0,0,.2);
}

.placeholder:before {
  content: 'soon';
  position: absolute;
  text-align: center;
  top: 40%;
  font-size: 8vw;
  width: 100%;
  font-family: 'Vidaloka', serif;
  color: white;
  opacity: .3;
}

/* · · · · · FONTS  · · · · · */
.neuzeit-book {
  font-family:'Neuzeit S LT';
}

.neuzeit-black {
  font-family: 'Neuzeit S LT Black';
}

.underline {
  text-decoration: underline;
}

/* · · · · · FOOTER - bottom menu · · · · · */
menu {
  z-index: 5000;
  min-width: 600px;
  height: 230px;
  height: 120px;
  color: azure;
  position: fixed;
  left: 5%;
  right: 5%;
  bottom: -180px;
  bottom: -70px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  flex-grow: 1;
  flex-shrink: 1;
  align-items: stretch;
  font-family:  monospace;
  font-family:'Neuzeit S LT', sans-serif;
  font-size: 11px;
  color: black;
  background-color: rgba(0,0,0,0);
  transition: bottom .35s cubic-bezier(0.50, 0.20, 0.05, 1);
}

/* footer - show menu */
menu:hover {
  bottom: 30px;
}

/* footer - each container */
menu div.menu-div {
  position: relative;
  display: block;
  float: left;
  width: 24.9%;
  width: 25%;
  height: auto;
  min-height: 100px;
  font-size: 12px;
  line-height: 20px;
  transition: all .15s ease-out;
}

/* footer - title container */
.main div.intro {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
}

/* footer - title */
.menu-text {
  position: absolute;
  left: 0;
  top: 0;
  color: black;
  width: 100%;
  height: 100%;
  text-align:  center;
  display: block;
  padding-top: 15px;
  font-size: 13px;
  font-family:'Neuzeit S LT Black';
  letter-spacing: .5px;
}

/* footer - title background color */
.fill {
  width: 100%;
  height: 100%;
  background-color: white;
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  transition: height 200ms cubic-bezier(0, 0.70, 0.40, 0.90);
}

/* footer- title, binder effect */
.fill-hover-p {
  background-color: black;
  height: 100%;
}

/* footer - title, white */
.white-font {
  color: white;
}

/* footer - each text content */
menu p,menu ul {
  width: 100%;
  height: 100%;
  display: inline-block;
  margin-top: 30px;
  padding: 20px 10px 10px 30px;
  background-color: white;
  transition: all .35s ease-out;
}

/* footer - techniques (last) */
menu ul {
  list-style-position: inside;
}

/* footer - avoid text to stick */
menu p:first-child {
  padding-left: 10px;
}

/* footer - text hover */
menu .menu-div p:hover,
menu .menu-div ul:hover {
  background-color: black;
  color: white;
  transition: all .03s ease-out;
}


/* main elements */
picture img,
picture,
div video {
  position: relative;
  display: block;
  width: 100%;
  /*without this, the container div has no heigth*/
  clear: both;
}

menu p span {
  color: inherit;
}

#linkedin, #mailto {
  cursor: pointer;
}

/* left side navigation */
nav {
  position: fixed;
  top:7rem;
  left: 1rem;
  z-index: 1;
}

nav ul li {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  margin-bottom: 15px;
  display: block;
  font-size: 8px;
  width: auto;
  float: left;
  clear: both;
  color: white;
}

/* each nav element */
nav ul li a {
  display: block;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
  color: white;
  line-height: 30px;
  border: 1px solid rgba(255,255,255,.3);
}

nav ul li a:hover {
  background-color: white;
  color: black;
  cursor: pointer;
  border: 1px solid white;
}

/* nav black style */
.nav-black {
  border: 1px solid rgba(0,0,0,.3);
  color: black;
}

.nav-black:hover {
  border: 1px solid rgba(255,255,255,.3);
}

/* nav labels */
nav ul li:hover::after {
  background-color: white;
  display: block;
  font-size: 11px;
  position: absolute;
  top: 15%;
  left: 150%;
  width: auto;
  color: black;
  text-align: center;
  padding: 7px 10px 5px 10px;
  z-index: 9000;
  white-space: nowrap;
}

nav ul li:nth-child(1):hover::after {
content: 'Oracle';
}
nav ul li:nth-child(2):hover::after {
content: 'Morgan Stanley';
}

nav ul li:nth-child(3):hover::after {
content: 'ProScullery';
}

nav ul li:nth-child(4):hover::after {
content: 'Olympus Tours';
}

nav ul li:nth-child(5):hover::after {
content: 'Marcaminos';
}

nav ul li:nth-child(6):hover::after {
content: 'Social Outreach';
}

nav ul li:nth-child(7):hover::after {
content: 'Social Outreach: Digital';
}

nav ul li:nth-child(8):hover::after {
content: 'Social Outreach: Broadcast';
}

nav ul li:nth-child(9):hover::after {
content: 'Roshfrans';
}

nav ul li:nth-child(10):hover::after {
content: 'Jose Cuervo';
}

nav ul li:nth-child(11):hover::after {
content: 'Type Legwork';
}


/* · · · · · COLORS  · · · · · */

/* color - variables */
/* applied to the project title and the line under */
:root {
  --color-dvg:          #438818;
  --color-dvgbroadcast: #9ED0E0;
  --color-dvgdigital:   #432160;
  --color-scullery:     #263247;
  --color-marcaminos:   #E20049;
  --color-olympus:      #5A5D9D;
  --color-roshfrans:    #FFAF00;
  --color-cuervo:       #816027;
  --color-typebook:     #D85E88;
  --color-morgan:       #001873;
  --color-oracle:       #8b0000;
  /*here*/
  --color-introtext:    white  ;
}

/* color - dvg, title */
section h1.project-title.color-dvg {
  color: var(--color-dvg);
}
/* color - dvg, broadcast */
section h1.project-title.color-dvg-broadcast {
  color: var(--color-dvgbroadcast);
}
/* color - dvg, digital */
section h1.project-title.color-dvg-digital {
  color: var(--color-dvgdigital);
}
/* color - scullery, title */
section h1.project-title.color-scullery {
  color: var(--color-scullery);
}
/* color - marcaminos, title */
section h1.project-title.color-marcaminos {
  color: var(--color-marcaminos);
}
/* color - olympus, title */
section h1.project-title.color-olympus {
  color: var(--color-olympus);
}
/* color - roshfrans, title */
section h1.project-title.color-roshfrans {
  color: var(--color-roshfrans);
}
/* color - jose cuervo, title */
section h1.project-title.color-cuervo {
  color: var(--color-cuervo);
}
/* color - typebook, title */
section h1.project-title.color-typebook {
  color: var(--color-typebook);
}
/* color - morgan, title */
section h1.project-title.color-morgan {
  color: var(--color-morgan);
}
/* color - oracle, title */
section h1.project-title.color-oracle {
  color: var(--color-oracle);
}


/* color - intro text, title */
section h1.project-title.color-introtext {
  color: var(--color-introtext);
}


/* color - title underline */
.line-dvg           {background-color: var(--color-dvg);        }
.line-dvgbroadcast  {background-color:var(--color-dvgbroadcast);}
.line-dvgdigital    {background-color:var(--color-dvgdigital);  }
.line-scullery      {background-color:var(--color-scullery);    }
.line-marcaminos    {background-color:var(--color-marcaminos);  }
.line-olympus       {background-color:var(--color-olympus);     }
.line-roshfrans     {background-color:var(--color-roshfrans);   }
.line-cuervo        {background-color:var(--color-cuervo);      }
.line-typebook      {background-color:var(--color-typebook);    }
.line-morgan        {background-color: var(--color-morgan);     }
.line-oracle        {background-color: var(--color-oracle);     }

/* main viewport background color */
.main-color-dvg               {background-color: #d2d2d2;     }
.main-color-dvg-b             {background-color: #100F24;     }
.main-color-dvg-d             {background-color: #E5E6E8;     }
.main-color-scullery          {background-color: #23282D;     }
.main-color-marcaminos        {background-color: #E3E3E3;     }
.main-color-olympus           {background-color: #ADDCE4;     }
.main-color-roshfrans         {background-color: #ffeb3b;     }
.main-color-cuervo            {background-color: #DDB428;     }
.main-color-typebook          {background-color: #171115;     }
.main-color-morgan            {background-color: #0F8EC7;     }
.main-color-oracle            {background-color: white;       }
.main-color-introtext         {background-color: black;       }

/* project background color (showed briefly on scroll) */
.color-project-dvg            {background: forestgreen;       }
.color-project-dvg-broadcast  {background: midnightblue;      }
.color-project-dvg-digital    {background: lightseagreen;     }
.color-project-scullery       {background: palevioletred;     }
.color-project-marcaminos     {background: lightgray;         }
.color-project-olympus        {background: aquamarine;        }
.color-project-roshfrans      {background: greenyellow;       }
.color-project-cuervo         {background: goldenrod;         }
.color-project-type           {background: darkmagenta;       }
.color-project-morgan         {background: midnightblue;      }
.color-project-oracle         {background: darkred;           }

.color-project-introtext      {background: none;                }


.display-none {
  display: none;
}


/********************************* media query end ****************************/


/* small devices (iphone 14 pro max) */
/* this overflows the previous media query */
@media only screen and (min-width: 0) and (max-width: 932px) {

  /* hide telephone, footer, iframe */
  header div:nth-child(3),
  menu,
  .grey {
    display: none;
  }

  /* header font size */
  header {
    font-size: 1rem;
  }

  /* project title container */
  /* fixed on bottom to avoid displaying menu 'on hover' */
  .project-title-container {
    bottom: 0;
    left: 0;
    right: 0;
  }

  /* project title */
  .project-title {
    font-size: 22px;
    text-align: center;
    padding: 10px 0;
    opacity: 1;
  }

  /* circle between projects */
  .project-separator {
    width: 80px;
    height: 80px;
    margin: 100px auto;
  }


  /* video tag position */
  .vtag {
    background-color: white;
    left: 86%;
    z-index: 9000;
  }

  /* video text */
  .vtag span.play {
    padding-left: 25px;
    color: black;
    padding-top: 10px;
  }

  /* pause */
  .vtag > span.full + span.play {
    background-color: black;
    color: white;
    width: 100%;
  }


  /* intro text */
  #introtext {
    font-size: 1rem;
    line-height: 1.5rem;
    /* space p elements */
    p {
      margin-top: 1.5rem;
    }
    /* margin for the last p element */
    p:last-child {
      margin-bottom: 2rem;
    }
  }



}