/* FONTS */

@font-face {
    font-family: Untitledsans Medium;
    src: url(../fonts/untitledsans-medium.woff);
}

@font-face {
    font-family: Lora Regular;
    src: url(../fonts/Lora-Regular.ttf);
}

:root{
  --timing: cubic-bezier(0.23, 1, 0.32, 1);
  --opacity:0;
}

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


/* BODY */

body {
	font-family: Untitledsans Medium, Sans-Serif;
	font-size: 0.8vw;
	line-height: 1.2;
	background-color: #f1efed;
	color: #262626;
	width: 100%;
  overflow: hidden;
  animation:fadeInAnimation ease-in 2s; 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards;
}

/* TITLE */

header .title h2 {
  font-size: 0.8vw;
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  display: flex;
  text-transform: uppercase;
}

 /* HOLDER AND IMAGE */

.image img{
  display: flex;
  padding-top: 80px;
  width: 38vw;
  margin-left: auto;
  margin-right: auto;
  pointer-events: none;
}

div.image{
  overflow: hidden;
}

div.image img{
  transform: translate(0, 120%);
  transition: transform 1.5s 2s var(--timing);
}

div.image.in-view img{
  transform: translate(0, 0);
}

/* div.text p{
  overflow: hidden;
}

div.text p{
  transform: translate(0, 2000%);
  transition: transform 1.5s 1s var(--timing);
  opacity: 0.001;
}

div.text.in-view p{
  transform: translate(0, 0);
  opacity: 1;
} */




/* MARKUP TEXT */

.text{
  display: flex;
    max-width: 38vw;
    margin-left: auto;
    margin-right: auto;
  padding-top: 0.6944444444444444vw;
  transition: opacity 3s;
  animation:fadeInAnimation ease-in 3s; 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards;
  
}

.text p {
    transition: opacity 3s;
    font-size: 1.52vw;
    text-transform: capitalize;
    font-family: Lora Regular;
  text-align: left;
}


.text p em {
    font-family: Lora Regular;
    font-size: 0.6944444444444444vw;
    position: relative;
  top: -0.58vw;
}
  
.text p strong {
    font-size: 1.52vw;
    text-transform: uppercase;
    font-family: Untitledsans Medium, Helvetica, sans-serif;
}

/* FOOTER */


footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  text-transform: uppercase;
/*   transition: opacity 0.3s; */
}

.contact a:hover {
 opacity: 0.3;
  transition: opacity 0.3s;
  
  
}
.pgp a:hover {
 opacity: 0.3;
  transition: opacity 0.3s;
  
  
}

.location {
    display: flex;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0%);
}

.circle {
    height: 0.5vw;
    width:  0.5vw;
    background-color: rgb(38, 38, 38);
    display: block;
    margin-right: 10px;
    border-radius: 50%;
}
  
.contact {
    display: flex;
    align-items: flex-end;
    text-align: right;
}



.pgp a {
  font-family: Untitledsans Medium, Sans-Serif;
	font-size: 0.8vw;
	line-height: 1.2;
	color: #262626;
  text-decoration: none;
  transition: opacity 3s;
  
}

.contact a{
  font-family: Untitledsans Medium, Sans-Serif;
	font-size: 0.8vw;
	line-height: 1.2;
	color: #262626;
  text-decoration: none;
  transition: opacity 3s;
  
}
  
  .city h2 {
    margin-right: 5px;
}




@media (max-width:1000px) {
  
  header .title h2{
    font-size: 1.5vw;
  }
  
  .image img{
    width: 60vw;
  }
  
   .text{
    max-width: 60vw;
    padding-top: 2vw;
  }
  
  .text p{
    font-size: 2.4vw;
  }
  
  .text p strong{
    font-size: 2.4vw;
  }
  
  .text p em{
    font-size: 1vw;
    top: -1vw;
  }
  
  footer{
    font-size: 1.5vw;
  }
  
  .pgp a{
    font-size: 1.5vw;
  }
  
  .contact a{
    font-size: 1.5vw;
  }
  
  .circle {
    height: 0.5vw;
    width: 0.5vw;
  }
  
  
  
  
  
}





@media (max-width:600px){
  
  header .title h2{
    font-size: 2vw;
  }
  
  .image img {
    width: 90vw;
    
  }
  
  .text{
    max-width: 90vw;
    padding-top: 2vw;
  }
  
  .text p{
    font-size: 5vw;
  }
  
  .text p strong{
    font-size: 5vw;
  }
  
  .text p em{
    font-size: 2vw;
    top: -2vw;
  }
  
  footer{
    font-size: 2vw;
  }
   .pgp a{
    font-size: 2vw;
  }
  
  .contact a{
    font-size: 2vw;
  }
  
  footer .location{
    display: none;
}
    
  
  .circle {
    height: 2vw;
    width: 2vw;
  }
  
  
}