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

/* Reset */

*,*::before,*::after{
	box-sizing:border-box;
}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td,
header,footer,aside,nav,article,figure,figcaption{
	margin:0;
	padding:0;
}
fieldset,img{
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var{
	font-style:normal;
	font-weight:400;
}
ol,ul{
	list-style:none;
}
caption,th{
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-family: neue-haas-grotesk-display, sans-serif;
	font-weight: 700;
	font-style: normal;
	color: #000000;
	font-size:100%;
}
p {
	font-family: neue-haas-grotesk-display, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size:100%;
	line-height: 1.5;
	letter-spacing: 0.2px;
}
li {
	font-family: neue-haas-grotesk-display, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size:100%;
}

span {
	color :inherit;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
}
a{
	text-decoration:none;
	color:inherit;
}
a:active,a:focus{
	outline:none;
}
html {
  scroll-behavior: smooth;
}


/* ----------------------------------------------------------------------- */



body{
background-color:  #F4F5EF;
}
/* -------------------------------BANNER---------------------------------------- */
.banner {
	width: 100vw;
	height: 100vh;
}
.main-title {
	font-size: 13.5vw;
	text-align: center;
}

.blur {
	width: 70vw;
	height: 70vw;
	border-radius: 50%;
	background-color: #D6EA50;
	position: absolute;
	z-index: -2;
		filter: blur(18px);
		margin-left: 45vw;
		margin-top: -10vw;
		position: fixed;
}
.thin {
	font-weight: 300;
	}
	.portfolio {
		font-size: 8vw;
		font-weight: 300;
		padding-left: 4vw;
		margin-top: 53vw;
		font-family: freight-text-pro, serif;
	font-weight: 300;
	font-style: italic;
	}

.intro {
	font-size: 4.2vw;
	letter-spacing: 0.1vw;
	font-weight: 500;
  width: 65vw;
	padding-left: 4vw;
	margin-top: 40vw;
}
.bold {
	font-size: 5vw;
	font-weight: 600;
	text-transform: uppercase;

}
.asterisko {
 width: 5vw;
 margin-left: 30vw;
 margin-top: 51vw;
 position: absolute;
}
.rotate1 {
 animation: rotation 1.5s;
}
.linear1 {
 animation-timing-function: linear;
}
.infinite1 {
 animation-iteration-count: infinite;
}
@keyframes rotation {
 from {
	 transform: rotate(0deg);
 }
 to {
	 transform: rotate(359deg);
 }
}






/* -------------------------------WORKS---------------------------------------- */

.works {
	width: 100vw;
	height: auto;
}
.selected {
	font-size: 12vw;
	font-weight: 500;
	padding-top: 10vw;
	margin-left: 10vw;
	border-bottom: 1px solid #000;
}


.grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 0vw;
		padding-top: 35vw;
		padding-left: 0vw;
}

.title-work {
	font-size: 10vw;
	line-height: 1;
	font-weight: 700;
	margin-top: 5vw;
  padding-left: 5vw;
	position: relative;
	z-index: 8;
	transition: 0.4s;
}
.field {
	font-size: 5.5vw;
	font-family: freight-text-pro, serif;
font-weight: 300;
font-style: italic;
position: absolute;
margin-left: 5vw;
}
.field2 {
	font-size: 5.5vw;
	font-family: freight-text-pro, serif;
font-weight: 300;
font-style: italic;
position: absolute;
margin-left: 5vw;
}
.field3{
	font-size: 5.5vw;
	font-family: freight-text-pro, serif;
font-weight: 300;
font-style: italic;
position: absolute;
margin-left: 5vw;
}
.field4 {
	font-size: 5.5vw;
	font-family: freight-text-pro, serif;
font-weight: 300;
font-style: italic;
position: absolute;
margin-left: 5vw;
}
.field5 {
	font-size: 5.5vw;
	font-family: freight-text-pro, serif;
font-weight: 300;
font-style: italic;
position: absolute;
margin-left: 5vw;
}
.field6 {
	font-size: 5.5vw;
	font-family: freight-text-pro, serif;
font-weight: 300;
font-style: italic;
position: absolute;
margin-left: 5vw;
}


.title-work:hover a{
	transition: 0.4s;
color: #B6D009;
}
.back-work {
 height: 20vw;
	color: #000;
border-bottom: 1px solid #000;
}



/* SLOGAN--------------------------------- */

#slogan {
	width: 100vw;
	height: 50vh;
}
.slogan-room {
margin-top: 30vw;
position: relative;
}
.slogan {
font-size: 32.5vw;
  font-weight: 900;
  -webkit-text-fill-color: #BBD02F; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 0.2vw;
  -webkit-text-stroke-color: #000;
  text-transform: uppercase;
  text-align: center;
  line-height: 0.5;
  letter-spacing: -1.5vw;
  word-spacing: 0vw;
  transition: 1s;
}

.slogan2 {
font-size: 32.5vw;
  font-weight: 900;
  -webkit-text-fill-color: #BBD02F; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 0.2vw;
  -webkit-text-stroke-color: #000;
  text-transform: uppercase;
  text-align: center;
  line-height: 0.5;
  letter-spacing: -1.5vw;
  word-spacing: 0vw;
  transition: 1s;

}



/*ABOUT-----------------------------------*/

.about {
	width: 100vw;
	height: auto;
	padding-top: 45vw
}
.about-title {
  font-size: 26vw;
	margin-left:  10vw;
  color: transparent ; /* Will override color (regardless of order) */
	-webkit-text-stroke-width: 0.3vw;
	-webkit-text-stroke-color: #000;
}

.intro-me {
font-size: 4.5vw;
margin-top: 4vw;
width: 80vw;
margin-left: 10vw;
}

.intro-me2 {
font-size: 4.5vw;
width: 80vw;
margin-left: 10vw;
margin-top: 10vw;
padding-bottom: 5vw;
}

.link-flickr {
	background-color: #B4CB1F;
	position: relative;
	z-index: 1;
}

/*FOOTER-------------------------------------*/
.footer {
margin-top: 0vw;
	width: 100vw;
	height: 110vh;
	background-color: #F4F5EF;
}
.get {
padding-top: 35vw;
font-size: 10vw;
	margin-left: 5vw;
	font-weight:  700;
	border-bottom:  10px solid #000;
}

.rotate-slogan {
 width: 25vw;
 margin-left: 5vw;
 margin-top: 10vw;
 position: absolute;
}
.rotate {
 animation: rotation 7.5s;
}
.linear {
 animation-timing-function: linear;
}
.infinite {
 animation-iteration-count: infinite;
}
@keyframes rotation {
 from {
	 transform: rotate(0deg);
 }
 to {
	 transform: rotate(359deg);
 }
}
.name {
font-size: 5vw;
text-transform: uppercase;
margin-left: 5vw;
margin-top: 45vw;
}
.my-field {
	font-size: 4.8vw;
	margin-left: 5vw;
	font-weight: 300;
}
.mail{
 margin-top: 5vw;
 font-size: 6vw;
 line-height: 1;
 font-weight: 300;
margin-left: 5vw;
letter-spacing: 0.2vw;
background-color: #D6EA50;
width: 71vw;
}
.link-social {
	font-family: neue-haas-grotesk-display, sans-serif;
	font-weight: 500;
	font-style: normal;
 margin-top: 0vw;
 margin-left: 5vw;
 margin-top: 20vw;

}
.link-social a{
font-style: normal;
 font-size: 4.7vw;
 margin-bottom: 1.5vw;
 display: flex;
}




.cname {
 font-size: 3.5vw;
 letter-spacing: 0.1vw;
 font-family: neue-haas-grotesk-display, sans-serif;
 font-weight: 500;
 padding-bottom: 2vw;
}
.yo {
 padding-top: 20vw;
text-align: center;
}






/* -------------------------------------project-1---------------------------------- */
.banner-projects {
	width: 100vw;
	height: 100vh;

}
.grid-links {
	display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-gap: 48vw;
 padding-top: 2vw;
 padding-left: 5vw;
position: fixed;
 z-index: 1;
 background-color: #F4F5EF;
 border-bottom: 0.5px solid #000000;
 width: 100vw;
top: 0;
height: 5vh;
}
.back-home li{
font-size: 4.1vw;
}
.main-title-2 {
	font-size: 10vw;
	font-weight: 600;
	margin-left: 5vw;
 position: absolute;
margin-top: 35vw;
}

.pic-banner {
	position: absolute;
	bottom: 0;
	width: 100vw;
	height: 55vh;
background-size: contain;
background-image: url("../images/banner-upholstery.jpg");
background-repeat: no-repeat;
background-size: cover;
	background-position: center;
}
.pic-banner-caravaggio {
	position: absolute;
	bottom: 0;
	width: 100vw;
	height: 55vh;
background-size: contain;
background-image: url("../images/banner-caravaggio.jpg");
background-repeat: no-repeat;
background-size: cover;
	background-position: center;
}
.pic-banner-akl {
	position: absolute;
	bottom: 0;
	width: 100vw;
	height: 55vh;
background-size: contain;
background-image: url("../images/banner-akl.jpg");
background-repeat: no-repeat;
background-size: cover;
	background-position: center;
}

.pic-banner-blue-note {
	position: absolute;
	bottom: 0;
	width: 100vw;
	height: 55vh;
background-size: contain;
background-image: url("../images/banner-blue-note.jpg");
background-repeat: no-repeat;
background-size: cover;
	background-position: center;
}
.pic-banner-rembrandt {
	position: absolute;
	bottom: 0;
	width: 100vw;
	height: 55vh;
background-size: contain;
background-image: url("../images/banner-rembrandt.jpg");
background-repeat: no-repeat;
background-size: cover;
	background-position: center;
}
.pic-banner-webflow {
	position: absolute;
	bottom: 0;
	width: 100vw;
	height: 55vh;
background-size: contain;
background-image: url("../images/banner-webflow.jpg");
background-repeat: no-repeat;
background-size: cover;
	background-position: center;
}
.grid-projects {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 15vw;
		padding: 5vw;

}
.grid-projects p {
	padding-bottom: 4vw;
}
.grid-projects {
	font-size: 4.5vw;
}

/* ----------------------------------------------------------------------- */
.works-section {
width: 100vw;
height: auto;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
		grid-gap: 5vw;

		padding-top: 2vw;
}
.grid-2 div{
	width: 94vw;
	margin-left: 3vw;
}


/* -------------------------arrow---------------------------------------------- */

.container {
	margin-top: 20vw;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
	background-color: #D6EA50;
	width: 90vw;
	border: 1px solid #000;
	padding: 3.5vw;
	margin-left: 5vw;
	border-radius: 0.8vw;
	font-size: 5vw;
}




/*-------------other projects-------------------------------*/


.other-projects {
	margin-top: 40vw;
	width: 100vw;
	height: auto;
}
.title-other {
	font-size: 12vw;
	font-weight: 500;
	margin-left: 5vw;
	text-transform: capitalize;
}
.grid-3 {
	margin-top: 20vw;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 20vw;
}
.card-container {
	perspective: 1000px;
  margin: 0 auto 50px;
  width: 90vw;
}
.front, .back {
	backface-visibility: hidden;
-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
 -o-backface-visibility: hidden;
position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  padding: 5vw;
  box-sizing: border-box;
  transition-delay: 0.15s;
  transition: 0s;
}
.card {
  position: relative;
  width: 90vw;
  height: 100vw;
  background: #F4F5EF;
  border-radius: 1vw;
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
/* ----------------------------------------------------------------------- */




.sub-title {
  color: #333741;
  -webkit-animation: slide-in 0.75s;
          animation: slide-in 0.75s;
  -webkit-animation: slide-in 0.75s cubic-bezier(0.625, 0.075, 0.11, 1.165);
          animation: slide-in 0.75s cubic-bezier(0.625, 0.075, 0.11, 1.165);
  -webkit-animation-timing-function: cubic-bezier(0.625, 0.075, 0.11, 1.165);
          animation-timing-function: cubic-bezier(0.625, 0.075, 0.11, 1.165);
  font-size: 6vw;
  font-weight: 300;
  margin: 2vw 0 0px 1vw;
}

.title {
  color: #000;
  -webkit-animation: slide-in-slow 0.75s;
          animation: slide-in-slow 0.75s;
  -webkit-animation: slide-in-slow 0.75s cubic-bezier(0.625, 0.075, 0.11, 1.165);
          animation: slide-in-slow 0.75s cubic-bezier(0.625, 0.075, 0.11, 1.165);
  -webkit-animation-timing-function: cubic-bezier(0.625, 0.075, 0.11, 1.165);
          animation-timing-function: cubic-bezier(0.625, 0.075, 0.11, 1.165);
  font-size: 10vw;
  font-weight: 600;
  margin-top: -1.8vw;
}

.image {
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-animation: slide-in-right 1.25s;
          animation: slide-in-right 1.25s;
  -webkit-animation: slide-in-right 1.25s cubic-bezier(0.625, 0.075, 0.11, 1.165);
          animation: slide-in-right 1.25s cubic-bezier(0.625, 0.075, 0.11, 1.165);
  -webkit-animation-timing-function: cubic-bezier(0.625, 0.075, 0.11, 1.165);
          animation-timing-function: cubic-bezier(0.625, 0.075, 0.11, 1.165);
  font-size: 35px;
  font-weight: 600;
  margin: 0;
}

@-webkit-keyframes slide-in {
  0% {
    transform: translate3d(-300px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slide-in {
  0% {
    transform: translate3d(-300px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes slide-in-slow {
  0% {
    transform: translate3d(-300px, 0, 0);
  }
  20% {
    transform: translate3d(-300px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slide-in-slow {
  0% {
    transform: translate3d(-300px, 0, 0);
  }
  20% {
    transform: translate3d(-300px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes slide-in-right {
  0% {
    transform: translate3d(400px, 0, 0);
  }
  30% {
    transform: translate3d(400px, 0, 0);
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    transform: translate3d(400px, 0, 0);
  }
  30% {
    transform: translate3d(400px, 0, 0);
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}


.footer-2 {
position:sticky;
margin-top: 50vw;
background-color: #F4F5EF;
}



/* Media queries */


/* Smartphones-landscape */



@media only screen
 and (min-width: 568px)
 and (max-width: 896px) and (orientation: landscape) {

	 .banner {
		 width: 100vw;
		 height: auto;
		 padding-bottom: 10vw;

	 }
	 .main-title {
		 font-size: 13vw;
		 text-align: center;
		 margin-top: -2.5vw;
	 }

	 .blur {
		 width: 35vw;
		 height: 35vw;
		 border-radius: 50%;
		 background-color: #D6EA50;
		 position: absolute;
		 z-index: -2;
			 filter: blur(18px);
			 margin-left: 70vw;
			 margin-top: -5vw;
			 position: fixed;
	 }
	 .bold {
		 font-size: 1.6vw;
		 font-weight: 600;
	 }
	 .intro {
		 font-size: 1.5vw;
		 letter-spacing: 0.1vw;
		 font-weight: 300;
		 width: 27vw;
		 padding-left: 6vw;
		 margin-top: 10vw;
	 }
	.portfolio {
		 font-size: 2.6vw;
		 font-weight: 300;
		 padding-left: 6vw;
		 margin-top: 10vw;
		 font-family: freight-text-pro, serif;
	 font-weight: 300;
	 font-style: italic;
	 }

	 .asterisko {
		width: 1.3vw;
		margin-left: 14.5vw;
		margin-top: 10vw;
		position: absolute;
	 }


	 /* -------------------------------WORKS---------------------------------------- */

	 .works {
		 margin-top: 10vw;
		 width: 100vw;
		 height: auto;
		 margin-bottom: 5vw;

	}
	 .selected {
		 font-size: 8vw;
		 font-weight: 500;
		 padding-top: 0vw;
		 margin-left: 30vw;
		 border-bottom: 1px solid #000;
		 position: relative;
	 }
	 .grid {
			 display: grid;
			 grid-template-columns: repeat(1, 1fr);
			 grid-gap: 0vw;
			 padding-top: 15vw;
			 padding-left: 0vw;

	 }

	 .title-work {
		 font-size: 8vw;
		 font-weight: 700;
		 padding-left: 5vw;
		 margin-top: 2.8vw;
	 }
	 .field {
		 font-size: 2.2vw;
		font-style: italic;
	 margin-top: -8vw;
	 position: absolute;
	 margin-left: 57vw;
	 }

	 .field2:nth-child(2) {
		 font-size: 2.2vw;
		 font-style: italic;
	 margin-top: -8vw;
	 position: absolute;
	 margin-left: 58vw;
	}
	.field3:nth-child(2) {
	 font-size: 2.2vw;
	 font-style: italic;
	margin-top: -8vw;
	position: absolute;
	margin-left: 49vw;
	}
	.field4:nth-child(2) {
	 font-size: 2.2vw;
	 font-style: italic;
	margin-top: -8vw;
	position: absolute;
	margin-left: 56vw;
	}
	.field5:nth-child(2) {
	 font-size: 2.2vw;
	 font-style: italic;
	margin-top: -8vw;
	position: absolute;
	margin-left: 47vw;
	}
	.field6:nth-child(2) {
	 font-size: 2.2vw;
	 font-style: italic;
	margin-top: -8vw;
	position: absolute;
	margin-left: 69.5vw;
	}
	.back-work {
	 height: 10vw;
	 color: #000;
	border-bottom: 1px solid #000;
	}
	 /* SLOGAN--------------------------------- */

	 #slogan {

	width: 100vw;
	height: 30vw;
	margin-top: -10vw;

	}
	 .slogan-room {

	}
		.slogan {
		font-size: 15vw;
			font-weight: 900;
			-webkit-text-fill-color: #D6EA50; /* Will override color (regardless of order) */
			-webkit-text-stroke-width: 0.1vw;
			-webkit-text-stroke-color: #272727;
			text-transform: uppercase;
			padding-left: 3vw;
			line-height: 0.5;
			letter-spacing: -1.7vw;
			word-spacing: 1.2vw;
			transition: 1s;
			width: 90vw;
		}

	 .slogan2{
	 font-size: 15vw;
		 font-weight: 900;
		 -webkit-text-fill-color: #D6EA50; /* Will override color (regardless of order) */
		 -webkit-text-stroke-width: 0.1vw;
		 -webkit-text-stroke-color: #272727;
		 text-transform: uppercase;
		 padding-left: 3vw;
		 line-height: 0.5;
		 letter-spacing: -1.7vw;
		 word-spacing: 1.2vw;
		 transition: 1s;
		 width: 90vw;
	 }




	 /*ABOUT-----------------------------------*/

	 .about {
		 width: 100vw;
		 height: auto;
		 padding-top: 10vw;
		 margin-bottom: auto;

	 }
	 .about-title {
		 font-size: 10vw;
		 margin-left:  10vw;
	 -webkit-text-fill-color: #F4F5EF; /* Will override color (regardless of order) */
		 -webkit-text-stroke-width: 0.1vw;
		 -webkit-text-stroke-color: #000;
	 }

	 .intro-me {
	 font-size: 1.5vw;
	 margin-top: 2vw;
	 width: 45vw;
	 margin-left: 25vw;
	 }

	 .intro-me2 {
	 font-size: 1.5vw;
	 text-align: left;
	 margin-top: 2vw;
	 width: 45vw;
	 margin-left: 25vw;
	 }




	 /*FOOTER-------------------------------------*/
	 .footer {
	padding-top: 5vw;
		 width: 100vw;
		 height: 100vh;
	background-color: #F4F5EF;
	 }
	 .get {
	font-size: 5vw;
		 margin-left: 5vw;
		 padding-top: 10vw;
		 font-weight:  700;
		 border-bottom: 10px solid #000;
	 }
	 .rotate-slogan {
		width: 7vw;
		margin-left: 4vw;
		margin-top: 3vw;
		position: absolute;
	 }
	 .rotate {
		animation: rotation 7.5s;
	 }
	 .linear {
		animation-timing-function: linear;
	 }
	 .infinite {
		animation-iteration-count: infinite;
	 }
	 @keyframes rotation {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(359deg);
		}
	 }
	 .name {
	 font-size: 1.6vw;
	 text-transform: uppercase;
	 margin-left: 5vw;
	 margin-top: 13vw;
	 font-weight: 600;
	 }
	 .my-field {
		 font-size: 1.3vw;
		 margin-left: 5vw;
		 font-weight: 300;
	 }
	 .mail{
		margin-top: 0vw;
		font-size: 1.2vw;

		font-weight: 500;
	 margin-left: 5vw;
	 letter-spacing: 0.1vw;
	 background-color: #D6EA50;
	 width: 17vw;
	 }
	 .link-social {
		 font-family: neue-haas-grotesk-display, sans-serif;
		 font-weight: 500;
		 font-style: normal;
		margin-top: 2vw;
		margin-left: 5vw;
		position: relative;
		z-index: 1;

	 }
	 .link-social a{
	 font-style: normal;
		font-size: 1.3vw;
		margin-bottom: 0vw;
	display: block;
	 }


	 .cname {
		font-size: 1vw;
		letter-spacing: 0vw;
		font-family: neue-haas-grotesk-display, sans-serif;
		font-weight: 500;
	 }
	 .yo {
		padding-top: 5vw;
	 text-align: center;
	 padding-bottom: 0vw;
	 }


	 /* -------------------------------------project-1---------------------------------- */


	 .banner-projects {
	 	width: 100vw;
	 	height: 100vh;
	 }
	 .grid-links {
		 display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 75vw;
		padding-top: 0.6vw;
		padding-left: 5vw;
	 position: fixed;
		z-index: 1;
		background-color: #F4F5EF;
		border-bottom: 0.5px solid #000000;
		width: 100vw;
		top: 0;
		height: 5vh;
	 }
	 .back-home li{
	 font-size: 1.1vw;
	 }
	 .main-title-2 {
	 	font-size: 4.5vw;
    margin-left: 5vw;
	  position: absolute;

	 	margin-top: 25vh;

	 }
	 .pic-banner {
	 	position: absolute;
	 	bottom: 0;
	 	top: 200px;
	 	width: 100vw;
	 	height: 65vh;
	 background-size: contain;
	 background-image: url("../images/banner-upholstery-desktop.jpg");
	 background-repeat: no-repeat;
	 background-size: cover;
	 }
	 .pic-banner-caravaggio {
	 	position: absolute;
	 	bottom: 0;
		top:200px;
	 	width: 100vw;
	 	height: 65vh;
	 background-size: contain;
	 background-image: url("../images/banner-caravaggio.jpg");
	 background-repeat: no-repeat;
	 background-size: cover;

	 }
	 .pic-banner-akl {
	 	position: absolute;
	 	bottom: 0;
		top:200px;
	 	width: 100vw;
	 	height: 65vh;
	 background-size: contain;
	 background-image: url("../images/banner-akl.jpg");
	 background-repeat: no-repeat;
	 background-size: cover;
	 }
	 .pic-banner-blue-note {
		position: absolute;
		bottom: 0;
		top:200px;
		width: 100vw;
		height: 65vh;
	 background-size: contain;
	 background-image: url("../images/banner-blue-note.jpg");
	 background-repeat: no-repeat;
	 background-size: cover;
	 }
	 .pic-banner-rembrandt {
		position: absolute;
		bottom: 0;
		top:200px;
		width: 100vw;
		height: 65vh;
	 background-size: contain;
	 background-image: url("../images/banner-rembrandt.jpg");
	 background-repeat: no-repeat;
	 background-size: cover;
	 }
	 .pic-banner-webflow {
	 position: absolute;
	 bottom: 0;
	 top:200px;
	 width: 100vw;
	 height: 65vh;
	background-size: contain;
	background-image: url("../images/banner-webflow.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	}
	 .grid-projects {
	 	margin-top: 10vw;
	 		display: grid;
	 		grid-template-columns: repeat(2, 1fr);
	 		grid-gap: 10vw;
	 		padding: 5vw;
	 }
	 .grid-projects p {
	 	padding-bottom: 2vw;
	 }
	 .grid-projects {
	 	font-size: 1.2vw;
	 }

	 /* ----------------------------------------------------------------------- */
	 .works-section {
	 width: 100vw;
	 height: auto;
	 }

	 .grid-2 {
	 		display: grid;
	 		grid-template-columns: repeat(1, 1fr);
	 		grid-gap: 2vw;
	 		 column-gap: 1vw;
	 		padding-top: 5vw;
	 		margin-left: auto;
	 		margin-right: auto;
	 	}


	 /* -------------------------arrow---------------------------------------------- */

	 .container {
	 	margin-top: 10vw;
	 	display: flex;
	 	align-items: center;
	 	justify-content: center;
	 	height: 100%;
	 	background-color: #D6EA50;
	 	width: 30vw;
	 	border: 1px solid #000;
	 	padding: 2vw;
	 	margin-left: 35vw;
	 	border-radius: 0.3vw;
		font-size: 2.5vw;
	 }



	 /*-------------other projects-------------------------------*/


	 .other-projects {
	 	margin-top: 20vw;
	 	width: 100vw;
	 	height: auto;
	 }
	 .title-other {
	 	font-size: 8vw;
	 	font-weight: 500;
	 	margin-left: 5vw;
	 	text-transform: capitalize;
	 }

	 .grid-3 {
	 	margin-top: 10vw;
	 		display: grid;
	 		grid-template-columns: repeat(3, 1fr);
	 		grid-gap: 0.5vw;
	 		column-gap: 0vw;
	 		padding: 3vw;
	 }
	 .card-container {
	 	perspective: 1000px;
	 	margin: 0 auto 50px;
	 	width: 28vw;
	 }


	 .card {
	 	position: relative;
	 	width: 28vw;
	 	height: 22vw;
	 	background: #F4F5EF;
	 	border-radius: 0.2vw;
	 	box-shadow: 0 40px 110px rgba(0, 0, 0, 0.45);
	 	overflow: hidden;

	 /* ----------------------------------------------------------------------- */
	 	transition: 0.5s;
	 -webkit-transition:0.5s;
	 -o-transition: 0.5s;
	 -moz-transition:  0.5s;
	 transform-style: preserve-3d;
	 -webkit-transform-style: preserve-3d;
	 }
	 /* ----------------------------------------------------------------------- */



	 .sub-title {
	 	color: #333741;
	 	-webkit-animation: slide-in 0.75s;
	 					animation: slide-in 0.75s;
	 	-webkit-animation: slide-in 0.75s cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 					animation: slide-in 0.75s cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 	-webkit-animation-timing-function: cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 					animation-timing-function: cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 	font-size: 1.2vw;
	 	font-weight: 300;
	 	margin: -3.5vw 0 0px -4vw;
	 }

	 .title {
	 	color: #000;
	 	-webkit-animation: slide-in-slow 0.75s;
	 					animation: slide-in-slow 0.75s;
	 	-webkit-animation: slide-in-slow 0.75s cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 					animation: slide-in-slow 0.75s cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 	-webkit-animation-timing-function: cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 					animation-timing-function: cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 	font-size: 1.8vw;
	 	font-weight: 600;
	 	margin-top: -1vw;
	 	margin: 0vw 0 0px -4vw;
}



	 .footer-2 {
	 position:sticky;
	 margin-top: 15vw;
	 background-color: #F4F5EF;
	 }




}




	 /* Small tablets */
	 @media only screen and (min-width: 481px) and (orientation: portrait)  {

	 	.banner {
	 		width: 100vw;
	 		height: 100vh;
	 	}
	 	.main-title {
	 		font-size: 13.5vw;
	 		text-align: center;
	 	}
	 	.blur {
	 		width: 60vw;
	 		height: 60vw;
	 		border-radius: 50%;
	 		background-color: #D6EA50;
	 		position: absolute;
	 		z-index: -2;
	 			filter: blur(18px);
	 			margin-left: 50vw;
	 			margin-top: -10vw;
	 			position: fixed;
	 	}
	 .intro {
	 		font-size: 3.3vw;
	 		letter-spacing: 0.1vw;
	 		font-weight: 500;
	 	  width: 50vw;
	 		padding-left: 4vw;
	 		margin-top: 30vw;
	 	}
	 	.bold {
	 		font-size: 4vw;
	 		font-weight: 600;
	 		text-transform: uppercase;

	 	}
	 	.portfolio {
	 		font-size: 6vw;
	 		font-weight: 300;
	 		padding-left: 4vw;
	 		margin-top: 50vw;
	 		font-family: freight-text-pro, serif;
	 	font-weight: 300;
	 	font-style: italic;
	 	}
	 	.asterisko {
	 	 width: 3.5vw;
	 	 margin-left: 24vw;
	 	 margin-top: 48vw;
	 	 position: absolute;
	 	}


	 	/* -------------------------------WORKS---------------------------------------- */

	 	.works {
	 		width: 100vw;
	 		height: 100vh;
	 	}
	 	.selected {
	 		font-size: 10vw;
	 		padding-top: 10vw;
	 		margin-left: 20vw;

	 	}
	 .grid {
	 	    display: grid;
	 	    grid-template-columns: repeat(1, 1fr);
	 	    grid-gap: 0vw;
	 			padding-top: 35vw;
	 			padding-left: 0vw;
	 	}

	 	.title-work {
	 		font-size: 8vw;
	 		font-weight: 700;
	 	  padding-left: 5vw;
	 		margin-top: 7vw;
	 }
	 	.field {
	 		font-size: 4vw;
	 		line-height: 0;
	    font-style: italic;
	 	margin-top: -9vw;
	 	position: absolute;
	 	margin-left: 60vw;
	 	}
	 	.field2:nth-child(2) {
	 		font-size: 4vw;
	    font-style: italic;
	 	margin-top: -10vw;
	 	position: absolute;
	 	margin-left: 61vw;
	 }
	 .field3:nth-child(2) {
	 	font-size: 4vw;
	  font-style: italic;
	 margin-top: -10vw;
	 position: absolute;
	 margin-left: 52vw;
	 }
	 .field4:nth-child(2) {
	 	font-size: 4vw;
	  font-style: italic;
	 margin-top: -10vw;
	 position: absolute;
	 margin-left: 60vw;
	 }
	 .field5:nth-child(2) {
	 	font-size: 4vw;
	  font-style: italic;
	 margin-top: -10vw;
	 position: absolute;
	 margin-left: 50vw;
	 }
	 .field6:nth-child(2) {
	 	font-size: 4vw;
	  font-style: italic;
	 margin-top: -10vw;
	 position: absolute;
	 margin-left: 73vw;
	 }
	 .back-work {
	  height: 13vw;
	 	color: #000;
	 border-bottom: 1px solid #000;
	 }

	 	/* SLOGAN--------------------------------- */



	 #slogan {
	 	width: 100vw;
	 	height: 100vw;
	 }
	 .slogan-room {
	 	margin-top: 60vw;
	 	position: relative;

	 	}
	 	.slogan {
	 	font-size: 32.5vw;
	 	 text-align: center;
	 	  line-height: 0.5;
	 	  letter-spacing: -1.5vw;
	 	  word-spacing: 0vw;
	 	  transition: 1s;

	 	}
	 	.slogan2{
	 	font-size: 32.5vw;
	 	 text-align: center;
	 	  line-height: 0.5;
	 	  letter-spacing: -1.5vw;
	 	  word-spacing: 0vw;
	 	  transition: 1s;

	 	}



	 	/*ABOUT-----------------------------------*/

	 	.about {
	 		padding-top: 30vw;
	 		width: 100vw;
	 		height: auto;

	 	}
	 	.about-title {
	 	  font-size: 24vw;
	 		margin-left:  10vw;
	 	-webkit-text-fill-color: #F4F5EF; /* Will override color (regardless of order) */
	 		-webkit-text-stroke-width: 0.2vw;
	 		-webkit-text-stroke-color: #000;
	 	}

	 	.intro-me {
	 	font-size: 3.5vw;
	 	margin-top: 5vw;
	 	width: 80vw;
	 	margin-left: 10vw;
	 	}

	 	.intro-me2 {
	 	font-size: 3.5vw;
	 	text-align: left;
	 	margin-top: 10vw;
	 	width: 80vw;
	 	margin-left: 10vw;
	 	}


	 	.png img{
	 		width: 80vw;
	 		position: absolute;

	 	}


	 	.link-flickr {
	 		background-color: #D6EA50;
	 	}



	 	/*FOOTER-------------------------------------*/
	 	.footer {
	 	padding-top: 0vw;
	 		width: 100vw;
	 		height: 100vh;
	 	}

	 	.get {
	 	font-size: 8vw;
	 		margin-left: 5vw;
	 		font-weight:  700;
	 		border-bottom: 10px solid #000;
	 	}

	 	.rotate-slogan {
	 	 width: 20vw;
	 	 margin-left: 5vw;
	 	 margin-top: 10vw;
	 	 position: absolute;
	 	}
	 	.rotate {
	 	 animation: rotation 7.5s;
	 	}
	 	.linear {
	 	 animation-timing-function: linear;
	 	}
	 	.infinite {
	 	 animation-iteration-count: infinite;
	 	}
	 	@keyframes rotation {
	 	 from {
	 		 transform: rotate(0deg);
	 	 }
	 	 to {
	 		 transform: rotate(359deg);
	 	 }
	 	}
	 	.name {
	 	font-size: 4vw;
	 	text-transform: uppercase;
	 	margin-left: 5vw;
	 	margin-top: 35vw;
	 	}
	 	.my-field {
	 		font-size: 3.9vw;
	 		margin-left: 5vw;
	 		font-weight: 300;
	 	}
	 	.mail{
	 	 margin-top: 5vw;
	 	 font-size: 3.3vw;
	 	 line-height: 1;
	 	 font-weight: 500;
	 	margin-left: 5vw;
	 	letter-spacing: 0.2vw;
	 	background-color: #D6EA50;
	 	width: 45vw;
	 	}
	 	.link-social {
	 		font-family: neue-haas-grotesk-display, sans-serif;
	 		font-weight: 500;
	 		font-style: normal;
	 	 margin-top: 10vw;
	 	 margin-left: 5vw;
	 	 padding-bottom: 5vw;


	 	}
	 	.link-social a{
	 	font-style: normal;
	 	 font-size: 3.5vw;
	 	 padding-bottom: 0vw;
	     display: flex;
	 	}


	 	.cname {
	 	 font-size: 2.5vw;
	 	 letter-spacing: 0.1vw;
	 	 font-family: neue-haas-grotesk-display, sans-serif;
	 	 font-weight: 500;
	 	}
	 	.yo {
	 	 padding-top: 0vw;
	 	text-align: center;
	 	}






	 	/* -------------------------------------project-1---------------------------------- */
	 	.banner-projects {
	 		width: 100vw;
	 		height: 100vh
	 	}
	 	.grid-links {
	 		display: grid;
	 	 grid-template-columns: repeat(2, 1fr);
	 	 grid-gap: 65vw;
	 	 padding-top: 2vw;
	 	 padding-left: 5vw;
	 	position: fixed;
	 	 z-index: 1;
	 	 background-color: #F4F5EF;
	 	 border-bottom: 0.5px solid #000000;
	 	 width: 100vw;
	 	}
	 	.back-home li{
	 	font-size: 2.2vw;
	 	}
	 	.main-title-2 {
	 		font-size: 6vw;
     position: absolute;
	 		margin-top: 25vw;
	 	}
	 	.pic-banner {
	 		position: absolute;
	 		bottom: 0;
	 		width: 100vw;
	 		height: 65vh;
	 	background-size: contain;
	 	background-image: url("../images/banner-upholstery.jpg");
	 	background-repeat: no-repeat;
	 	background-size: cover;
	 	}
	 	.grid-projects {
	 	    display: grid;
	 	    grid-template-columns: repeat(1, 1fr);
	 	    grid-gap: 15vw;
	 			padding: 5vw;
	 	}


	 	.grid-projects p {
	 		padding-bottom: 4vw;
	 	}
	 	.grid-projects {
	 		font-size: 2.8vw;
	 	}

	 	/* ----------------------------------------------------------------------- */
	 	.works-section {
	 	width: 100vw;
	 	height: auto;
	 	}

	 	.grid-2 {
	 	    display: grid;
	 	    grid-template-columns: repeat(1, 1fr);
				grid-gap: 5vw;
	       column-gap: 0vw;
	 			padding-top: 2vw;

	 	}
		.grid-2 div{
width: 92vw;
margin-left: 4vw;

		}


	 	/* -------------------------arrow---------------------------------------------- */

	 	.container {
	 		margin-top: 20vw;
	 	  display: flex;
	 	  align-items: center;
	 	  justify-content: center;
	 	  height: 100%;
	 		background-color: #D6EA50;
	 		width: 80vw;
	 		border: 1px solid #000;
	 		padding: 2.5vw;
	 		margin-left: 10vw;
	 		border-radius: 0.5vw;
			font-size: 3.5vw;
	 	}

	 	/*-------------other projects-------------------------------*/


	 	.other-projects {
	 		margin-top: 40vw;
	 		width: 100vw;
	 		height: auto;
	 	}
	 	.title-other {
	 		font-size: 10vw;
	 		font-weight: 500;
	 		margin-left: 5vw;
	 		text-transform: capitalize;
	 	}

	 	.grid-3 {
	 		margin-top: 20vw;
	 	    display: grid;
	 	    grid-template-columns: repeat(2, 1fr);
	 	    grid-gap: 0vw;
	 	}
	 	.card-container {
	 		perspective: 1000px;
	 	  margin: 0 auto 50px;
	 	  width: 45vw;
	 	}


	 	.card {
	 	  position: relative;
	 	  width: 45vw;
	 	  height: 40vw;
	 	  background: #F4F5EF;
	 	  border-radius: 1vw;
	 	  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.45);
	 	  overflow: hidden;
}
	 	/* ----------------------------------------------------------------------- */


	 	.sub-title {
	 	  color: #333741;
	 	  -webkit-animation: slide-in 0.75s;
	 	          animation: slide-in 0.75s;
	 	  -webkit-animation: slide-in 0.75s cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 	          animation: slide-in 0.75s cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 	  -webkit-animation-timing-function: cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 	          animation-timing-function: cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 	  font-size: 3.2vw;
	 	  font-weight: 300;
	 	  margin: -2vw 0 0px -2vw;
	 	}

	 	.title {
	 	  color: #000;
	 	  -webkit-animation: slide-in-slow 0.75s;
	 	          animation: slide-in-slow 0.75s;
	 	  -webkit-animation: slide-in-slow 0.75s cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 	          animation: slide-in-slow 0.75s cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 	  -webkit-animation-timing-function: cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 	          animation-timing-function: cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 	  font-size: 4.8vw;
	 	  font-weight: 600;
	 	  margin-top: -1vw;
	 		margin: 0vw 0 0px -2vw;


	 	}

	 	.synopsis {
	 	  color: #000000;
	 	  font-size: 4vw;
	 	  font-weight: 600;
	 	  margin: -16vw 0 5vw 0;
	 	}
	 	.description {
	 		font-size: 2.2vw;
	 		margin-top: -3vw;
	 	}

	 	.btn {
	 		border: 1px solid #000000;
	 	  border-radius: 0.5vw;
	 	  background: transparent;
	 	  display: inline-block;
	 	  font-size: 2.2vw;
	 	  padding: 1vw 1vw 0.5vw 0.5vw;
	 	  color: #000000;
	 	  transition: 0.5s;
	 	  margin: 3vw 3vw 0 0;
	 	  font-weight: 100;
	 		font-family: neue-haas-grotesk-display, sans-serif;
	 		font-weight: 500;
	 		font-style: normal;

	 	}

	 	.btn i {
	 	  margin: 0 2px 0;
	 	}



	 	.footer-2 {
	 	position:sticky;
	 	margin-top: 30vw;
	 	background-color: #F4F5EF;
	 	}





	 }





	 /* ipad */

	 @media only screen and (min-width: 768px) and   (orientation: portrait)  {

	 	.banner {
	 		width: 100vw;
	 		height: 100vh;
	 	}
	 	.main-title {
	 		font-size: 13.5vw;
	 		text-align: center;
	 	}

	 	.blur {
	 		width: 60vw;
	 		height: 60vw;
	 		border-radius: 50%;
	 		background-color: #D6EA50;
	 		position: absolute;
	 		z-index: -2;
	 			filter: blur(18px);
	 			margin-left: 55vw;
	 			margin-top: -15vw;
	 			position: fixed;
	 	}

	 .intro {
	 		font-size: 3vw;
	 		letter-spacing: 0.1vw;
	 		font-weight: 500;
	 		width: 50vw;
	 		padding-left: 4vw;
	 		margin-top: 20vw;
	 	}
	 	.bold {
	 		font-size: 3.5vw;
	 		font-weight: 600;
	 		text-transform: uppercase;

	 	}
	 	.portfolio {
	 		font-size: 5vw;
	 		font-weight: 300;
	 		padding-left: 4vw;
	 		margin-top: 50vw;
	 		font-family: freight-text-pro, serif;
	 	font-weight: 300;
	 	font-style: italic;
	 	}
	 	.asterisko {
	 	 width: 3vw;
	 	 margin-left: 20vw;
	 	 margin-top: 48vw;
	 	 position: absolute;
	 	}


	 	/* -------------------------------WORKS---------------------------------------- */

	 	.works {
	 		width: 100vw;
	 		height: 100vh;
	 	}
	 	.selected {
	 		font-size: 10vw;
	 		padding-top: 10vw;
	 		margin-left: 25vw;

	 	}
	 .grid {
	 			display: grid;
	 			grid-template-columns: repeat(1, 1fr);
	 			grid-gap: 0vw;
	 			padding-top: 25vw;
	 			padding-left: 0vw;
	 	}

	 	.title-work {
	 		font-size: 8vw;
	 		padding-bottom: 4vw;
	 		padding-left: 5vw;
	 		margin-top: 5vw;
	 }
	 	.field {
	 		font-size: 4vw;
	 	 font-style: italic;
	 	margin-top: -12vw;
	 	position: absolute;
	 	margin-left: 59vw;
	 	}
	 	.field2:nth-child(2) {
	 		font-size: 4vw;
	 	 font-style: italic;
	 	margin-top: -13vw;
	 	position: absolute;
	 	margin-left: 61vw;
	 }
	 .field3:nth-child(2) {
	 	font-size: 4vw;
	  font-style: italic;
	 margin-top: -13vw;
	 position: absolute;
	 margin-left: 52vw;
	 }
	 .field4:nth-child(2) {
	 	font-size: 4vw;
	  font-style: italic;
	 margin-top: -13vw;
	 position: absolute;
	 margin-left: 58vw;
	 }
	 .field5:nth-child(2) {
	 	font-size: 4vw;
	  font-style: italic;
	 margin-top: -13vw;
	 position: absolute;
	 margin-left: 50vw;
	 }
	 .field6:nth-child(2) {
	 	font-size: 4vw;
	  font-style: italic;
	 margin-top: -13vw;
	 position: absolute;
	 margin-left: 71vw;
	 }


	 	/* SLOGAN--------------------------------- */



	 #slogan {
	 	width: 100vw;
	 	height: 100vw;
	 }
	 .slogan-room {
	 	margin-top: 35vw;
	 	position: relative;

	 	}
	 	.slogan {
	 	font-size: 32.5vw;
	 	 text-align: center;
	 		line-height: 0.5;
	 		letter-spacing: -1.5vw;
	 		word-spacing: 0vw;
	 		transition: 1s;

	 	}
	 	.slogan {
	 	font-size: 32.5vw;
	 	 text-align: center;
	 		line-height: 0.5;
	 		letter-spacing: -1.5vw;
	 		word-spacing: 0vw;
	 		transition: 1s;

	 	}


	 	/*ABOUT-----------------------------------*/

	 	.about {
	 		width: 100vw;
	 		height: auto;
	 		padding-top: 35vw
	 	}
	 	.about-title {
	 	  font-size: 22vw;
	 		margin-left:  10vw;
	 	-webkit-text-fill-color: #F4F5EF; /* Will override color (regardless of order) */
	 		-webkit-text-stroke-width: 0.2vw;
	 		-webkit-text-stroke-color: #000;
	 	}

	 	.intro-me {
	 	font-size: 3.2vw;
	 	margin-top: 5vw;
	 	width: 75vw;
	 	margin-left: 10vw;
	 	}

	 	.intro-me2 {
	 	font-size: 3.2vw;
	 	text-align: left;
	 	margin-top: 5vw;
	 	width: 75vw;
	 	margin-left: 10vw;
	 	}


	 	.png img{
	 		width: 55vw;
	 		position: absolute;

	 	}



	 	.link-flickr {
	 		background-color: #D6EA50;
	 	}



	 	/*FOOTER-------------------------------------*/
	 	.footer {
	 	padding-top: 0vw;
	 		width: 100vw;
	 		height: 100vh;
	 	}


	 	.get {
	 	font-size: 6vw;
	 		margin-left: 5vw;
	 		font-weight:  700;
	 		border-bottom: 10px solid #000;
	 	}
	 	.rotate-slogan {
	 	 width: 17vw;
	 	 margin-left: 4vw;
	 	 margin-top: 7vw;
	 	 position: absolute;
	 	}
	 	.rotate {
	 	 animation: rotation 7.5s;
	 	}
	 	.linear {
	 	 animation-timing-function: linear;
	 	}
	 	.infinite {
	 	 animation-iteration-count: infinite;
	 	}
	 	@keyframes rotation {
	 	 from {
	 		 transform: rotate(0deg);
	 	 }
	 	 to {
	 		 transform: rotate(359deg);
	 	 }
	 	}
	 	.name {
	 	font-size: 3.5vw;
	 	text-transform: uppercase;
	 	margin-left: 5vw;
	 	margin-top: 30vw;
	 	}
	 	.my-field {
	 		font-size: 3.4vw;
	 		margin-left: 5vw;
	 		font-weight: 300;
	 	}
	 	.mail{
	 	 margin-top: 2vw;
	 	 font-size: 2.8vw;
	 	 line-height: 1;
	 	 font-weight: 500;
	 	margin-left: 5vw;
	 	letter-spacing: 0.2vw;
	 	background-color: #D6EA50;
	 	width: 39vw;
	 	}
	 	.link-social {
	 		font-family: neue-haas-grotesk-display, sans-serif;
	 		font-weight: 500;
	 		font-style: normal;
	 	 margin-top: 10vw;
	 	 margin-left: 5vw;

	 	}
	 	.link-social a{
	 	font-style: normal;
	 	 font-size: 3.3vw;
	 	 padding-bottom: 0vw;
	 	 display: block;

	 	}


	 	.cname {
	 	 font-size: 2.3vw;
	 	 letter-spacing: 0.1vw;
	 	 font-family: neue-haas-grotesk-display, sans-serif;
	 	 font-weight: 500;
	 	}
	 	.yo {
	 	 padding-top: 5vw;
	 	 padding-bottom: 3vw;
	 	text-align: center;
	 	}

	 	}



	 /* desktop */
	 @media only screen and (min-width: 1024px) {
	 	.banner {
	 		width: 100vw;
	 		height: auto;
	 		padding-bottom: 10vw;

	 	}
	 	.main-title {
	 		font-size: 13vw;
	 		text-align: center;
	 		margin-top: -2.5vw;
	 	}

	 	.blur {
	 		width: 35vw;
	 		height: 35vw;
	 		border-radius: 50%;
	 		background-color: #D6EA50;
	 		position: absolute;
	 		z-index: -2;
	 			filter: blur(18px);
	 			margin-left: 70vw;
	 			margin-top: -5vw;
	 			position: fixed;
	 	}
	 	.bold {
	 		font-size: 1.6vw;
	 		font-weight: 600;
	 	}
	 	.intro {
	 		font-size: 1.5vw;
	 		letter-spacing: 0.05vw;
	 		font-weight: 300;
	 	  width: 27vw;
	 		padding-left: 6vw;
	 		margin-top: 10vw;
	 	}
	 .portfolio {
	 		font-size: 2.6vw;
	 		font-weight: 300;
	 		padding-left: 6vw;
	 		margin-top: 10vw;
	 		font-family: freight-text-pro, serif;
	 	font-weight: 300;
	 	font-style: italic;
	 	}

	 	.asterisko {
	 	 width: 1.3vw;
	 	 margin-left: 14.5vw;
	 	 margin-top: 10vw;
	 	 position: absolute;
	 	}


	 	/* -------------------------------WORKS---------------------------------------- */

	 	.works {
	 		margin-top: 10vw;
	 		width: 100vw;
	 		height: auto;
	 		margin-bottom: 5vw;

	 }
	 	.selected {
	 		font-size: 8vw;
	 		font-weight: 500;
	 		padding-top: 0vw;
	 		margin-left: 30vw;
	 		border-bottom: 1px solid #000;
	 		position: relative;
	 	}
	 	.grid {
	 			display: grid;
	 			grid-template-columns: repeat(1, 1fr);
	 			grid-gap: 0vw;
	 			padding-top: 15vw;
	 			padding-left: 0vw;

	 	}

	 	.title-work {
	 		font-size: 8vw;
	 		font-weight: 700;
	 	  padding-left: 5vw;
	 		margin-top: 2.8vw;
	 	}
	 	.field {
	 		font-size: 2.2vw;
	 	 font-style: italic;
	 	margin-top: -8vw;
	 	position: absolute;
	 	margin-left: 57vw;
	 	}

	 	.field2:nth-child(2) {
	 		font-size: 2.2vw;
	    font-style: italic;
	 	margin-top: -8vw;
	 	position: absolute;
	 	margin-left: 59vw;
	 }
	 .field3:nth-child(2) {
	 	font-size: 2.2vw;
	  font-style: italic;
	 margin-top: -8vw;
	 position: absolute;
	 margin-left: 50vw;
	 }
	 .field4:nth-child(2) {
	 	font-size: 2.2vw;
	  font-style: italic;
	 margin-top: -8vw;
	 position: absolute;
	 margin-left: 56vw;
	 }
	 .field5:nth-child(2) {
	 	font-size: 2.2vw;
	  font-style: italic;
	 margin-top: -8vw;
	 position: absolute;
	 margin-left: 47vw;
	 }
	 .field6:nth-child(2) {
	 	font-size: 2.2vw;
	  font-style: italic;
	 margin-top: -8vw;
	 position: absolute;
	 margin-left: 70vw;
	 }
	 .back-work {
	  height: 10vw;
	 	color: #000;
	 border-bottom: 1px solid #000;
	 }
	 	/* SLOGAN--------------------------------- */

	 	#slogan {

	 width: 100vw;
	 height: 30vw;
	 margin-top: -10vw;

	 }
	 	.slogan-room {

	 }
	   .slogan {
	   font-size: 15vw;
	     font-weight: 900;
	     -webkit-text-fill-color: #D6EA50; /* Will override color (regardless of order) */
	     -webkit-text-stroke-width: 0.1vw;
	     -webkit-text-stroke-color: #272727;
	     text-transform: uppercase;
	     padding-left: 3vw;
	     line-height: 0.5;
	     letter-spacing: -1.7vw;
	     word-spacing: 1.2vw;
	     transition: 1s;
	     width: 90vw;
	   }

	 	.slogan2{
	 	font-size: 15vw;
	 		font-weight: 900;
	 		-webkit-text-fill-color: #D6EA50; /* Will override color (regardless of order) */
	 		-webkit-text-stroke-width: 0.1vw;
	 		-webkit-text-stroke-color: #272727;
	 		text-transform: uppercase;
	 		padding-left: 3vw;
	 		line-height: 0.5;
	 		letter-spacing: -1.7vw;
	 		word-spacing: 1.2vw;
	 		transition: 1s;
	 		width: 90vw;
	 	}




	 	/*ABOUT-----------------------------------*/

	 	.about {
	 		width: 100vw;
	 		height: auto;
	 		padding-top: 10vw;
	 		margin-bottom: auto;

	 	}
	 	.about-title {
	 	  font-size: 10vw;
	 		margin-left:  10vw;
	 	-webkit-text-fill-color: #F4F5EF; /* Will override color (regardless of order) */
	 		-webkit-text-stroke-width: 0.1vw;
	 		-webkit-text-stroke-color: #000;
	 	}

	 	.intro-me {
	 	font-size: 1.5vw;
	 	margin-top: 2vw;
	 	width: 45vw;
	 	margin-left: 25vw;
	 	}

	 	.intro-me2 {
	 	font-size: 1.5vw;
	 	text-align: left;
	 	margin-top: 2vw;
	 	width: 45vw;
	 	margin-left: 25vw;
	 	}




	 	/*FOOTER-------------------------------------*/
	 	.footer {
	 padding-top: 5vw;
	 		width: 100vw;
	 		height: 100vh;
	 background-color: #F4F5EF;
	 	}
	 	.get {
	 font-size: 5vw;
	 		margin-left: 5vw;
	 		padding-top: 10vw;
	 		font-weight:  700;
	 		border-bottom: 10px solid #000;
	 	}
	 	.rotate-slogan {
	 	 width: 7vw;
	 	 margin-left: 4vw;
	 	 margin-top: 3vw;
	 	 position: absolute;
	 	}
	 	.rotate {
	 	 animation: rotation 7.5s;
	 	}
	 	.linear {
	 	 animation-timing-function: linear;
	 	}
	 	.infinite {
	 	 animation-iteration-count: infinite;
	 	}
	 	@keyframes rotation {
	 	 from {
	 		 transform: rotate(0deg);
	 	 }
	 	 to {
	 		 transform: rotate(359deg);
	 	 }
	 	}
	 	.name {
	 	font-size: 1.6vw;
	 	text-transform: uppercase;
	 	margin-left: 5vw;
	 	margin-top: 13vw;
	 	font-weight: 600;
	 	}
	 	.my-field {
	 		font-size: 1.3vw;
	 		margin-left: 5vw;
	 		font-weight: 300;
	 	}
	 	.mail{
	 	 margin-top: 0vw;
	 	 font-size: 1.2vw;

	 	 font-weight: 500;
	 	margin-left: 5vw;
	 	letter-spacing: 0.1vw;
	 	background-color: #D6EA50;
	 	width: 17vw;
	 	}
	 	.link-social {
	 		font-family: neue-haas-grotesk-display, sans-serif;
	 		font-weight: 500;
	 		font-style: normal;
	 	 margin-top: 2vw;
	 	 margin-left: 5vw;
	 	 position: relative;
	 	 z-index: 1;

	 	}
	 	.link-social a{
	 	font-style: normal;
	 	 font-size: 1.3vw;
	 	 margin-bottom: 0vw;
	 display: block;
	 transition: 0.4s;
	 	}
.link-social a:hover {
	text-decoration: line-through;
}

	 	.cname {
	 	 font-size: 1vw;
	 	 letter-spacing: 0vw;
	 	 font-family: neue-haas-grotesk-display, sans-serif;
	 	 font-weight: 500;
	 	}
	 	.yo {
	 	 padding-top: 5vw;
	 	text-align: center;
	 	padding-bottom: 0vw;
	 	}








	 	/* -------------------------------------project-1---------------------------------- */


	 	.banner-projects {
	 		width: 100vw;
	 		height: 100vh;
	 	}
	 	.grid-links {
	 		display: grid;
	 	 grid-template-columns: repeat(2, 1fr);
	 	 grid-gap: 75vw;
	 	 padding-top: 0.6vw;
	 	 padding-left: 5vw;
	 	position: fixed;
	 	 z-index: 1;
	 	 background-color: #F4F5EF;
	 	 border-bottom: 0.5px solid #000000;
	 	 width: 100vw;
		 top: 0;
		 height: 5vh;
	 	}
	 	.back-home li{
	 	font-size: 1.1vw;
		transition: 0.4s;
	 	}

		.back-home li:hover {
	  text-decoration: line-through;
		}
	 	.main-title-2 {
	 		font-size: 4.5vw;
	 	  margin-left: 5vw;
	 	 position: absolute;
	 	margin-top: 25vh;
}
	 	.pic-banner {
	 		position: absolute;
	 		top: 50vh;
     width: 100vw;
	 		height: 70vh;
     background-image: url("../images/banner-upholstery-desktop.jpg");
	 	background-repeat: no-repeat;
	 	background-size: cover;
			background-position: center;
	 	}
		.pic-banner-caravaggio {
			position: absolute;
			top: 50vh;
			width: 100vw;
			height: 70vh;
    background-image: url("../images/banner-caravaggio-desktop.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
}

.pic-banner-akl {
	position: absolute;
	top: 50vh;
	width: 100vw;
	height: 70vh;
background-image: url("../images/banner-akl-desktop.jpg");
background-repeat: no-repeat;
background-size: cover;
	background-position: center;
}
.pic-banner-blue-note {
	position: absolute;
	top: 50vh;
	width: 100vw;
	height: 70vh;
background-image: url("../images/banner-blue-note-desktop.jpg");
background-repeat: no-repeat;
background-size: cover;
	background-position: center;
}
.pic-banner-rembrandt {
	position: absolute;
	top: 50vh;
	width: 100vw;
	height: 70vh;
background-image: url("../images/banner-rembrandt-desktop.jpg");
background-repeat: no-repeat;
background-size: cover;
	background-position: center;
}
.pic-banner-webflow {
	position: absolute;
	top: 50vh;
	width: 100vw;
	height: 70vh;
background-image: url("../images/banner-webflow-desktop.jpg");
background-repeat: no-repeat;
background-size: cover;
	background-position: center;
}

	 	.grid-projects {
	 		margin-top: 10vw;
	 			display: grid;
	 			grid-template-columns: repeat(2, 1fr);
	 			grid-gap: 10vw;
	 			padding: 7vw;
	 	}
	 	.grid-projects p {
	 		padding-bottom: 2vw;
	 	}
	 	.grid-projects {
	 		font-size: 1.2vw;
	 	}

	 	/* ----------------------------------------------------------------------- */
	 	.works-section {
	 	width: 100vw;
	 	height: auto;
	 	}

	 	.grid-2 {
	 			display: grid;
	 			grid-template-columns: repeat(1, 1fr);
	 			grid-gap: 2.5vw;
	       column-gap: 0vw;
	 			padding-top: 2vw;


	 		}
	.grid-2 div{
width: 85vw;
margin-left: 7.5vw;
}

	 	/* -------------------------arrow---------------------------------------------- */

	 	.container {
	 		margin-top: 10vw;
	 		display: flex;
	 		align-items: center;
	 		justify-content: center;
	 		height: 100%;
	 		background-color: #F4F5EF;
	 		width: 12vw;
			height: 4vw;
		  border: 1px solid #000;
	 		padding: 0.4vw;
	 		margin-left: 44vw;
	 		border-radius: 2%;
			transition: all ease-in-out 300ms;
			font-size: 1.2vw;
			}
.container:hover {
	background-color: #D6EA50;
  box-shadow: 0px 37px 10px -10px rgba(0,0,0,0.4);
    transform: translate(0px, -10px);
    color: #212121 !important;
}






	 	/*-------------other projects-------------------------------*/


	 	.other-projects {
	 		margin-top: 20vw;
	 		width: 100vw;
	 		height: auto;
	 	}
	 	.title-other {
	 		font-size: 8vw;
	 		font-weight: 500;
	 		margin-left: 5vw;
	 		text-transform: capitalize;
	 	}

	 	.grid-3 {
	 		margin-top: 10vw;
	 			display: grid;
	 			grid-template-columns: repeat(3, 1fr);
	 			grid-gap: 0.5vw;
	 			column-gap: 0vw;
	 			padding: 3vw;
	 	}
	 	.card-container {
	 		perspective: 1000px;
	 		margin: 0 auto 50px;
	 		width: 28vw;
	 	}


	 	.card {
	 		position: relative;
	 		width: 28vw;
	 		height: 22vw;
	 		background: #F4F5EF;
	 		border-radius: 0.2vw;
	 		box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0);
	 		overflow: hidden;
			border: 0.8px solid #000;
			transition: all ease-in-out 300ms;

	 	}
	 	/* ----------------------------------------------------------------------- */


	 	.card:hover {
    box-shadow: 0px 37px 10px -10px rgba(0,0,0,0.4);
		    transform: translate(0px, -10px);
		    color: #212121 !important;
	 	cursor: pointer;
	 	}


	 	.sub-title {
	 		color: #333741;
	 		-webkit-animation: slide-in 0.75s;
	 						animation: slide-in 0.75s;
	 		-webkit-animation: slide-in 0.75s cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 						animation: slide-in 0.75s cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 		-webkit-animation-timing-function: cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 						animation-timing-function: cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 		font-size: 1.2vw;
	 		font-weight: 300;
	 		margin: -3.5vw 0 0px -4vw;
	 	}

	 	.title {
	 		color: #000;
	 		-webkit-animation: slide-in-slow 0.75s;
	 						animation: slide-in-slow 0.75s;
	 		-webkit-animation: slide-in-slow 0.75s cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 						animation: slide-in-slow 0.75s cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 		-webkit-animation-timing-function: cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 						animation-timing-function: cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 		font-size: 1.8vw;
	 		font-weight: 600;
	 		margin-top: -1vw;
	 		margin: 0vw 0 0px -4vw;


	 	}



	 	.footer-2 {
	 	position:sticky;
	 	margin-top: 15vw;
	 	background-color: #F4F5EF;
	 	}

	 }



	 /* ipad pro */
	 @media only screen
	  and (min-width: 834px)
	  and (max-width: 1024px) and (orientation: portrait) {
	 	 .banner {
	  		width: 100vw;
	  		height: 40vh;

	  	}
	  	.main-title {
	  		font-size: 13vw;
	  		text-align: center;
	  		margin-top: -2.5vw;
	  	}

	  	.blur {
	  		width: 35vw;
	  		height: 35vw;
	  		border-radius: 50%;
	  		background-color: #D6EA50;
	  		position: absolute;
	  		z-index: -2;
	  			filter: blur(18px);
	  			margin-left: 70vw;
	  			margin-top: -5vw;
	  			position: fixed;
	  	}
	  	.bold {
	  		font-size: 1.6vw;
	  		font-weight: 600;
	  	}
	  	.intro {
	  		font-size: 1.5vw;
	  		letter-spacing: 0.1vw;
	  		font-weight: 300;
	  	  width: 27vw;
	  		padding-left: 6vw;
	  		margin-top: 10vw;
	  	}
	  .portfolio {
	  		font-size: 2.6vw;
	  		font-weight: 300;
	  		padding-left: 6vw;
	  		margin-top: 10vw;
	  		font-family: freight-text-pro, serif;
	  	font-weight: 300;
	  	font-style: italic;
	  	}

	  	.asterisko {
	  	 width: 1.3vw;
	  	 margin-left: 14.5vw;
	  	 margin-top: 10vw;
	  	 position: absolute;
	  	}


	  	/* -------------------------------WORKS---------------------------------------- */

	  	.works {
	  		width: 100vw;
	  		height: auto;
	  		margin-bottom: 5vw;

	  }
	  	.selected {
	  		font-size: 8vw;
	  		font-weight: 500;
	  		padding-top: 10vw;
	  		margin-left: 30vw;
	  		border-bottom: 1px solid #000;
	  	}
	  	.grid {
	  			display: grid;
	  			grid-template-columns: repeat(1, 1fr);
	  			grid-gap: 0vw;
	  			padding-top: 15vw;
	  			padding-left: 0vw;

	  	}

	  	.title-work {
	  		font-size: 8vw;
	  		font-weight: 700;
	  	  padding-left: 5vw;
	  		margin-top: 2.8vw;
	  	}
	  	.field {
	  		font-size: 2.2vw;
	  	 font-style: italic;
	  	margin-top: -10vw;
	  	position: absolute;
	  	margin-left: 60vw;
	  	}

	  	.field2:nth-child(2) {
	  		font-size: 2.2vw;
	     font-style: italic;
	  	margin-top: -12vw;
	  	position: absolute;
	  	margin-left: 61vw;
	  }
	  .field3:nth-child(2) {
	  	font-size: 2.2vw;
	   font-style: italic;
	  margin-top: -11vw;
	  position: absolute;
	  margin-left: 52vw;
	  }
	  .field4:nth-child(2) {
	  	font-size: 2.2vw;
	   font-style: italic;
	  margin-top: -11vw;
	  position: absolute;
	  margin-left: 57vw;
	  }
	  .field5:nth-child(2) {
	  	font-size: 2.2vw;
	   font-style: italic;
	  margin-top: -12vw;
	  position: absolute;
	  margin-left: 48vw;
	  }
	  .field6:nth-child(2) {
	 	 font-size: 2.2vw;
	 	font-style: italic;
	  margin-top: -12vw;
	  position: absolute;
	  margin-left: 71vw;
	  }
	  .back-work {
	   height: 10vw;
	  	color: #000;
	  border-bottom: 1px solid #000;
	  }
	  	/* SLOGAN--------------------------------- */

	  	#slogan {

	  width: 100vw;
	  height: 30vw;

	  }
	  	.slogan-room {

	  }
	    .slogan {
	    font-size: 15vw;
	      font-weight: 900;
	      -webkit-text-fill-color: #D6EA50; /* Will override color (regardless of order) */
	      -webkit-text-stroke-width: 0.1vw;
	      -webkit-text-stroke-color: #272727;
	      text-transform: uppercase;
	      padding-left: 3vw;
	      line-height: 0.5;
	      letter-spacing: -1.7vw;
	      word-spacing: 1.2vw;
	      transition: 1s;
	      width: 90vw;
	    }

	  	.slogan2{
	  	font-size: 15vw;
	  		font-weight: 900;
	  		-webkit-text-fill-color: #D6EA50; /* Will override color (regardless of order) */
	  		-webkit-text-stroke-width: 0.1vw;
	  		-webkit-text-stroke-color: #272727;
	  		text-transform: uppercase;
	  		padding-left: 3vw;
	  		line-height: 0.5;
	  		letter-spacing: -1.7vw;
	  		word-spacing: 1.2vw;
	  		transition: 1s;
	  		width: 90vw;
	  	}




	  	/*ABOUT-----------------------------------*/

	  	.about {
	  		width: 100vw;
	  		height: auto;
	  		padding-top: 10vw;
	  		padding-bottom: 10vw;
	  	}
	  	.about-title {
	  	  font-size: 10vw;
	  		margin-left:  10vw;
	  	-webkit-text-fill-color: #F4F5EF; /* Will override color (regardless of order) */
	  		-webkit-text-stroke-width: 0.1vw;
	  		-webkit-text-stroke-color: #000;
	  	}

	  	.intro-me {
	  	font-size: 1.5vw;
	  	margin-top: 2vw;
	  	width: 45vw;
	  	margin-left: 25vw;
	  	}

	  	.intro-me2 {
	  	font-size: 1.5vw;
	  	text-align: left;
	  	margin-top: 2vw;
	  	width: 45vw;
	  	margin-left: 25vw;
	  	}




	  	/*FOOTER-------------------------------------*/
	  	.footer {
	  padding-top: 5vw;
	  		width: 100vw;
	  		height: 50vh;

	  		background-color: #F4F5EF;
	  	}
	  	.get {
	  font-size: 5vw;
	  		margin-left: 5vw;
	  		padding-top: 10vw;
	  		font-weight:  700;
	  		border-bottom: 10px solid #000;
	  	}
	 	.rotate-slogan {
	 	 width: 7vw;
	 	 margin-left: 4vw;
	 	 margin-top: 3vw;
	 	 position: absolute;
	 	}
	 	.rotate {
	 	 animation: rotation 7.5s;
	 	}
	 	.linear {
	 	 animation-timing-function: linear;
	 	}
	 	.infinite {
	 	 animation-iteration-count: infinite;
	 	}
	 	@keyframes rotation {
	 	 from {
	 		 transform: rotate(0deg);
	 	 }
	 	 to {
	 		 transform: rotate(359deg);
	 	 }
	 	}
	  	.name {
	  	font-size: 1.6vw;
	  	text-transform: uppercase;
	  	margin-left: 5vw;
	  	margin-top: 15vw;
	  	font-weight: 600;
	  	}
	  	.my-field {
	  		font-size: 1.3vw;
	  		margin-left: 5vw;
	  		font-weight: 300;
	  	}
	  	.mail{
	  	 margin-top: 0vw;
	  	 font-size: 1.2vw;

	  	 font-weight: 500;
	  	margin-left: 5vw;
	  	letter-spacing: 0.1vw;
	  	background-color: #D6EA50;
	  	width: 17vw;
	  	}
	  	.link-social {
	  		font-family: neue-haas-grotesk-display, sans-serif;
	  		font-weight: 500;
	  		font-style: normal;
	  	 margin-top: 2vw;
	  	 margin-left: 5vw;
	  	 position: relative;
	  	 z-index: 1;

	  	}
	  	.link-social a{
	  	font-style: normal;
	  	 font-size: 1.3vw;
	  	 margin-bottom: 0vw;
	  display: block;
	  	}


	  	.cname {
	  	 font-size: 1vw;
	  	 letter-spacing: 0vw;
	  	 font-family:
	 	 y, sans-serif;
	  	 font-weight: 500;
	  	}
	  	.yo {
	  	 padding-top: 5vw;
	  	text-align: center;
	  	padding-bottom: 0vw;
	  	}

	 	/* -------------------------------------project-1---------------------------------- */


	 	.banner-projects {
	 		width: 100vw;
	 		height: 60vh;
	 	}
	 	.grid-links {
	 		display: grid;
	 	 grid-template-columns: repeat(2, 1fr);
	 	 grid-gap: 75vw;
	 	 padding-top: 1.5vw;
	 	 padding-left: 5vw;
	 	position: fixed;
	 	 z-index: 1;
	 	 background-color: #F4F5EF;
	 	 border-bottom: 0.5px solid #000;
	 	 width: 100vw;
		 top: 0;
		 height: 3vh;
	 	}
	 	.back-home li{
	 	font-size: 1.2vw;
	 	}
	 	.main-title-2 {
	 		font-size: 4.5vw;
     margin-left: 5vw;
	 	 position: absolute;
	 		margin-top: 15vh;

	 	}
	 	.pic-banner {
	 		position: absolute;
	 		bottom: 0;
	 		top: 380px;
	 		width: 100vw;
	 		height: 40vh;

	 	background-image: url("../images/banner-upholstery-desktop.jpg");
	 	background-repeat: no-repeat;
	 	background-size: cover;
	 	}
		.pic-banner-caravaggio {
			position: absolute;
			bottom: 0;
			top: 380px;
			width: 100vw;
			height: 40vh;

		background-image: url("../images/banner-caravaggio-desktop.jpg");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.pic-banner-akl {
		position: absolute;
		bottom: 0;
		top: 380px;
		width: 100vw;
		height: 40vh;

	background-image: url("../images/banner-akl-desktop.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	}

	.pic-banner-blue-note {
		position: absolute;
		bottom: 0;
		top: 380px;
		width: 100vw;
		height: 40vh;

	background-image: url("../images/banner-blue-note-desktop.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	}

	.pic-banner-rembrandt {
		position: absolute;
		bottom: 0;
		top: 380px;
		width: 100vw;
		height: 40vh;

	background-image: url("../images/banner-rembrandt-desktop.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	}






	 	.grid-projects {
	 		margin-top: 10vw;
	 			display: grid;
	 			grid-template-columns: repeat(2, 1fr);
	 			grid-gap: 10vw;
	 			padding: 5vw;
	 	}
	 	.grid-projects p {
	 		padding-bottom: 2vw;
	 	}
	 	.grid-projects {
	 		font-size: 1.2vw;
	 	}

	 	/* ----------------------------------------------------------------------- */
	 	.works-section {
	 	width: 100vw;
	 	height: auto;
	 	}

	 	.grid-2 {
	 			display: grid;
	 			grid-template-columns: repeat(1, 1fr);
	 			grid-gap: 2vw;
	 			column-gap: 1vw;
	 			padding-top: 5vw;
	 			margin-left: auto;
	 			margin-right: auto;
	 		}


	 	/* -------------------------arrow---------------------------------------------- */

		.container {
	 		margin-top: 20vw;
	 		display: flex;
	 		align-items: center;
	 		justify-content: center;
	 		height: 100%;
	 		background-color: #D6EA50;
	 		width: 40vw;

		  border: 1px solid #000;
	 		padding: 2vw;
	 		margin-left: 30vw;
	 		border-radius: 2%;
			transition: 0.4s;
			font-size: 3vw;
			}



	 	/*-------------other projects-------------------------------*/


	 	.other-projects {
	 		margin-top: 20vw;
	 		width: 100vw;
	 		height: auto;
	 	}
	 	.title-other {
	 		font-size: 8vw;
	 		font-weight: 500;
	 		margin-left: 5vw;
	 		text-transform: capitalize;
	 	}

	 	.grid-3 {
	 		margin-top: 10vw;
	 			display: grid;
	 			grid-template-columns: repeat(3, 1fr);
	 			grid-gap: 0.5vw;
	 			column-gap: 0vw;
	 			padding: 3vw;
	 	}
	 	.card-container {
	 		perspective: 1000px;
	 		margin: 0 auto 50px;
	 		width: 28vw;
	 	}


	 	.card {
	 		position: relative;
	 		width: 28vw;
	 		height: 22vw;
	 		background: #F4F5EF;
	 		border-radius: 0.2vw;
	 		box-shadow: 0 40px 110px rgba(0, 0, 0, 0.45);
	 		overflow: hidden;
			border: solid 0px;

}
	 	/* ----------------------------------------------------------------------- */


	 	.card:hover {

	 		cursor: pointer;
	 	}

	 	.card:hover .back {
	 		opacity: 1;
	 	}

	 	.sub-title {
	 		color: #333741;
	 		-webkit-animation: slide-in 0.75s;
	 						animation: slide-in 0.75s;
	 		-webkit-animation: slide-in 0.75s cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 						animation: slide-in 0.75s cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 		-webkit-animation-timing-function: cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 						animation-timing-function: cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 		font-size: 1.2vw;
	 		font-weight: 300;
	 		margin: -3.5vw 0 0px -4vw;
	 	}

	 	.title {
	 		color: #000;
	 		-webkit-animation: slide-in-slow 0.75s;
	 						animation: slide-in-slow 0.75s;
	 		-webkit-animation: slide-in-slow 0.75s cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 						animation: slide-in-slow 0.75s cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 		-webkit-animation-timing-function: cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 						animation-timing-function: cubic-bezier(0.625, 0.075, 0.11, 1.165);
	 		font-size: 1.8vw;
	 		font-weight: 600;
	 		margin-top: -1vw;
	 		margin: 0vw 0 0px -4vw;


	 	}

	 	.synopsis {
	 		color: #000000;
	 		font-size: 1.8vw;
	 		font-weight: 600;
	 		margin: -16vw 0 5vw -3vw;
	 	}
	 	.description {
	 		font-size: 1vw;
	 		margin-top: -4.5vw;
	 		margin-left: -3vw;
	 	}

	 	.btn {
	 		border: 1px solid #000000;
	 		border-radius: 0.1vw;
	 		background: transparent;
	 		display: inline-block;
	 		font-size: 0.8vw;
	 		padding: 0.5vw 1vw 0.5vw 0.5vw;
	 		color: #000000;
	 		transition: 0.5s;
	 		margin: 3vw 3.3vw 0 0;
	 		font-weight: 100;
	 		font-family: neue-haas-grotesk-display, sans-serif;
	 		font-weight: 500;
	 		font-style: normal;
	 		font-size:100%;
	 	}

	 	.btn i {
	 		margin: 0 2px 0;
	 	}

	 	.card-container .btn {
	 	margin-left: -3vw;
	 	}


	 	.footer-2 {
	 	position:sticky;
	 	margin-top: 15vw;
	 	background-color: #F4F5EF;
	 	}

	 	}