@import url("https://use.typekit.net/lzc3zvm.css");

body{
    background-color: #0d0d0d;
	overflow: hidden;
}

#Wrapper{
    width: 100%;
    height: 100%;
}

#Wrapper-Mobile{
	display: none;
    width: 100%;
    height: 100%;
	font-family: "avenir-lt-pro", sans-serif;
	font-weight: 800;
	font-style: normal;
	COLOR: #FFF;
}

#Wrapper #Intro{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}

#Wrapper-Mobile #Intro{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100vw;
    height: 100vh;
}

.Intro-Content{
	padding: 30px 100px;
    z-index: 2;
}

[class^='Intro-Title']{
	font-family: "avenir-lt-pro", sans-serif;
	font-weight: 800;
	font-style: normal;
	font-size: 17rem;
	line-height: 17rem;
	letter-spacing: 0.3rem;
    color: #EC6369;
    cursor: default;
}

.Intro-Logo{
	position: absolute; 
	left: 0;
	bottom: -3px;
	z-index: 1;
}

#Wrapper .Intro-Logo-Image{
	width: 30rem;
}

#Wrapper-Mobile .Intro-Logo-Image{
	width: 16rem;
	z-index: 1;
}

.Intro-Bubble{
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	color: #FFF;
	z-index: 50;
	opacity: 0;
}

.Intro-Bubble-Text{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
  	height: 102px;
	font-family: "avenir-lt-pro", sans-serif;
	font-weight: 800;
	font-style: normal;
	font-size: 12px;
	color: #EC6369;
	z-index: 1;
	text-align: center;
}

.Intro-Bubble-Background {
  	width: 100px;
  	height: 100px;
  	background: #FFF;
  	border-radius: 50%;
	opacity: 0.9;
  	z-index: 0;
}

#Wrapper-Mobile .Intro-Images{
	display: flex;
	flex-direction: column;
    justify-content: flex-start;
	gap: 30px;
	padding-top: 12rem;
	padding-left: 1.4rem;
	z-index: 1;
}

#Wrapper-Mobile .Intro-Image-Bear{
    width: 19rem;
}

#Wrapper-Mobile .Intro-Image-Baseline{
    width: 14rem;
}

.Section-Content{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
    z-index: 1;
}

#Wrapper .Section-Background{
    position: absolute;
    background-image: url("../images/grid.png");
    background-repeat: repeat;
    width: 100vw;
	height: 100vh;
	z-index: 0;
}

#Wrapper-Mobile .Section-Background{
    position: absolute;
    background-image: url("../images/small-grid.png");
    background-repeat: repeat;
    width: 100vw;
	height: 100vh;
	z-index: 0;
}

#Workspace{
    background-color: #EC6369;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}

#Wrapper .Workspace-Title{
	font-family: "lora", serif;
	font-weight: 700;
	font-style: normal;
	font-size: 17rem;
	line-height: 16rem;
	color: #000;
	text-box: trim-both cap alphabetic;
}

#Wrapper .Workspace-Text{
	display: flex;
	align-items: flex-end;
	font-family: "merriweather", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.4rem;
	line-height: 2.6rem;
	color: #000;
	width: 30vw;
	text-box: trim-both ex alphabetic;
}

#Wrapper-Mobile #Workspace{
    background-color: #EC6369;
    display: flex;
	flex-direction: column;
    align-items:flex-start;
	justify-content: center;
	gap: 2rem;
    width: 100vw;
    height: 100vh;
}

#Wrapper-Mobile .Workspace-Title{
	font-family: "lora", serif;
	font-weight: 700;
	font-style: normal;
	font-size: 5rem;
	line-height: 4.5rem;
	color: #000;
	padding-left: 1.4rem;
	z-index: 1;
}

#Wrapper-Mobile .Workspace-Text{
	display: flex;
	align-items: flex-end;
	font-family: "merriweather", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.6rem;
	color: #000;
	width: 80vw;
	padding-left: 1.4rem;
	z-index: 1;
}

#Wrapper #CoffeeShop{
    background-color: #0D0D0D;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}

#Wrapper .CoffeeShop-Title{
	font-family: "playfair-display", serif;
	font-weight: 700;
	font-style: normal;
	font-size: 17rem;
	line-height: 16rem;
	color: #EC6369;
	text-box: trim-both cap alphabetic;
}

#Wrapper .CoffeeShop-Text{
	display: flex;
	align-items: flex-end;
	font-family: "lato", sans-serif;	
	font-weight: 500;
	font-style: normal;
	font-size: 1.5rem;
	line-height: 2.6rem;
	color: #EC6369;
	width: 30vw;
	text-box: trim-both ex alphabetic;
}

#Wrapper-Mobile #CoffeeShop{
    background-color: #0D0D0D;
    display: flex;
	flex-direction: column;
    align-items: flex-start;
	justify-content: center;
    width: 100vw;
    height: 100vh;
	gap: 2rem;
}

#Wrapper-Mobile .CoffeeShop-Title{
	font-family: "playfair-display", serif;
	font-weight: 700;
	font-style: normal;
	font-size: 5rem;
	line-height: 4.5rem;
	color: #EC6369;
	padding-left: 1.4rem;
	z-index: 1;
}

#Wrapper-Mobile .CoffeeShop-Text{
	display: flex;
	align-items: flex-end;
	font-family: "lato", sans-serif;	
	font-weight: 500;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.6rem;
	color: #EC6369;
	width: 80vw;
	padding-left: 1.4rem;
	z-index: 1;
}

#Wrapper #About{
    background-color: #EC6369;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}

#Wrapper .About-Title{
	font-family: "josefin-sans", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 17rem;
	line-height: 16rem;
	color: #000;
	text-box: trim-both cap alphabetic;
}

#Wrapper .About-Text{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
    gap: 4rem;
}

#Wrapper .About-Text-Logo{
    width: 20rem;
}

#Wrapper .About-Text-OpenHours{
	font-family: "abril-text", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.6rem;
	line-height: 2.4rem;
	color: #000;
	width: 30vw;
	text-box: trim-both ex alphabetic;
}

#Wrapper .About-Text-Buttons{
    display: flex;
	flex-direction: column;
    gap: 0.8rem;
}

#Wrapper .About-Text-Buttons a{
    display: inline-flex;
	position: relative;
    font-family: "avenir-lt-pro", sans-serif;
	font-weight: 800;
	font-style: normal;
	font-size: 1.2rem;
    line-height: 1.2rem;
	text-decoration: none;
	color: #0D0D0D;
    transition: all 0.5s ease-out;
	overflow: hidden;
    padding-bottom: 3px;
    cursor: pointer;
}

#Wrapper .About-Text-Buttons a::after{
	 content: '';
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 width: 100%;
	 height: 2px;
	 background-color: #0D0D0D;
  	 transform: translate3d(-100%, 0, 0);
	 transition: transform 300ms;
}

#Wrapper .About-Text-Buttons a:hover::after,
.About-Text-Buttons a:focus::after{
  	transform: translate3d(0, 0, 0);
}

#Wrapper-Mobile #About{
    background-color: #EC6369;
    display: flex;
	flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100vw;
    height: 100vh;
	gap: 2.6rem;
}

#Wrapper-Mobile .About-Title{
	font-family: "josefin-sans", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 5.4rem;
	line-height: 5rem;
	color: #000;
	padding-left: 1.4rem;
	z-index: 1;
}

#Wrapper-Mobile .About-Text{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
    gap: 2rem;
	padding-left: 1.4rem;
	z-index: 1;
}

#Wrapper-Mobile .About-Text-OpenHours{
	font-family: "abril-text", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.2rem;
	line-height: 1.4rem;
	color: #000;
	width: 80vw;
}

#Wrapper-Mobile .About-Text-Buttons{
    display: flex;
	flex-direction: column;
    gap: 0.3rem;
}

#Wrapper-Mobile .About-Text-Buttons a{
    display: inline-flex;
	position: relative;
    font-family: "avenir-lt-pro", sans-serif;
	font-weight: 800;
	font-style: normal;
	font-size: 1rem;
    line-height: 1.2rem;
	text-decoration: none;
	color: #0D0D0D;
}

.Big-Slash{
	height: 50rem;
}

.Small-Slash{
	height: 33.4rem;
}

@media only screen and (max-width: 1500px) {

	body{
		overflow: visible;
	}

	#Wrapper{
		display: none;
	}
	
	#Wrapper-Mobile{
		display: block;		
	}
	
	
}