@font-face {
    font-family: 'Neue Helvetica BQ';
    src: url('fonts/NeueHelveticaBQ-Roman.woff2') format('woff2'),
        url('fonts/NeueHelveticaBQ-Roman.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}







*
{
	padding: 0px;
	margin: 0px;
}

body
{
	width: 100%;
	padding: 0;
	font-family: 'Neue Helvetica BQ';
	font-weight: 300;
	letter-spacing: 0.05em;
	-webkit-scroll-behavior: smooth;
}

span
{
	color: #a2a2a2;
}

p {
	font-size: 17px;
	line-height: 1.5em;
}



a
{
	color: black;
	text-decoration: underline;

}

a:hover
{
	text-decoration: none;
	cursor: pointer
}

ul
{
	font-size: 50px;
}

li 
{
list-style: none;
}

li a:hover
{

}

/*Properties*/


.wd-12
{
	width: 12.5%;
	flex-wrap: wrap;
}

.wd-25
{
	width: 25%;
	flex-wrap: wrap;
}

.wd-33
{
	width: 33.33%;
	flex-wrap: wrap;
}

.wd-50
{
	width: 50%;
	flex-wrap: wrap;
}

.wd-66
{
	width: 66.66%;
	flex-wrap: wrap;
}

.gap-0
{
	gap: 0px;
}

.gap-10
{
	gap: 10px;
}

.gap-30
{
	gap: 30px;
}

.center
{
	text-align: center;
}

.right
{
	text-align: right;
}

.left
{
	text-align: left;
}

.deg-45
{
	transform: rotate(-45deg);
}


/*Colors*/

.blk
{
	background-color: black;
	color: white;
}

.wht
{
	background-color: white;
	color: black;
}

.white 
{
	color:white;
}

.rose
{
	background-color: #F9C6B3;
	color: black;
}





/*Sections*/


header
{
	width: 40%;
	max-width: 1920px;
	height: auto;
	padding-top: 0.5%;
	margin: auto;
}

header img
{
	width: 100%;
}

.background
{
width: 100%;
height: 100vh;
background-image: url("ref.jpg");
background-attachment: fixed;
background-size: cover;
background-position: center;
z-index: -1000;
display:none;
}	


.container
{
	width: 100%;
}

.intro_text
{
	font-size: 2.2em;
	text-transform: uppercase;
	position: absolute;
	bottom: 0;
	margin-bottom: 2%;
}

.projects
{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 4.8em;
}

.footer_nav
{
	position: fixed;
	z-index: 10000;
	bottom: 0;
	padding-top: 2vh;
	padding-bottom: 3vh;
	width: 96%;
	display: flex;
	font-size: 17px;
	left: 50%;
	transform: translateX(-50%);
	/*background-color: white;*/
}

.header_nav
{
	position: fixed;
	z-index: 10000;
	top: 0;
	padding-top: 3vh;
	padding-bottom: 2vh;
	width: 96%;
	display: flex;
	font-size: 17px;
	left: 50%;
	transform: translateX(-50%);
	/*background-color: white;*/
}

.project_prev
{
    position: fixed;
    width: 100%;
    height:100vh;
    z-index: -1111110;
    top: 50%;
    left: 50%;
    z-index: 1000;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: center;
background-image: none;
background-attachment: fixed;
background-size: cover;
background-position: center;
}

.project_prev img
{
    position: fixed;
    width: 80%;
    max-width: 600px;
    height:auto;
    z-index: -110000;
    top: 50%;
    left: 50%;
    z-index: 1000;
    transform: translate(-50%, -50%);
    display: flex;
}




.project_prev:hover
{
    position: fixed;
    width: 100%;
    height:100vh;
    z-index: -110000;
    top: 50%;
    left: 50%;
    z-index: 1000;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: center;
background-attachment: fixed;
background-size: cover;
background-position: center;
}


.logo img 
{
	height: 20px;
}

.about
{
	width: 96%;
	padding-left: 2%;
	padding-right: 2%;
	display: flex;
	flex-wrap: wrap;
	margin-top: 80px;
	margin-bottom: 40px;
}

.start {
	margin-top: 200px;
}

.mov img {
 display:none;
}

/*Backgrounds*/

.hover
{
	width: 100%;
	height: 100vh;
}

.background_1
{
	height: 100vh;
	float: left;
	position: relative;
	z-index: 10000;
}

.background_1:hover
{
	height: 100vh;
	float: left;
	position: relative;
	z-index: 10000;
}



.background_1:hover ~ .bg_01
{
	width: 100%;
	height: 100vh;
	position: fixed;
	background-image: url("ref1.jpg");
	background-size: cover;
	background-position: center;
	z-index: 1;
	display: block;
}

.bg_01
{
	width: 100%;
	height: 100vh;
	position: fixed;
	background-image: url("ref1.jpg");
	background-size: cover;
	background-position: center;
	z-index: 1;
	display: none;
}




/*—————————————*/

.background_2
{
	height: 100vh;
	float: left;
	position: relative;
	z-index: 10000;
}

.bg_02
{
	width: 100%;
	height: 100vh;
	position: fixed;
	background-image: url("ref2.jpg");
	background-size: cover;
	background-position: center;
	z-index: 1;
	display: none;
}

.background_2:hover
{
	height: 100vh;
	float: left;
	position: relative;
	z-index: 10000;
}

.background_2:hover ~ .bg_02
{
	width: 100%;
	height: 100vh;
	position: fixed;
	background-image: url("ref2.jpg");
	background-size: cover;
	background-position: center;
	z-index: 1;
	display: block;
}

/*—————————————*/

.background_3
{
	height: 100vh;
	float: left;
	position: relative;
	z-index: 10000;
}

.bg_03
{
	width: 100%;
	height: 100vh;
	position: fixed;
	background-image: url("ref3.jpg");
	background-size: cover;
	background-position: center;
	z-index: 1;
	display: none;
}

.background_3:hover
{
	height: 100vh;
	float: left;
	position: relative;
	z-index: 10000;
}

.background_3:hover ~ .bg_03
{
	width: 100%;
	height: 100vh;
	position: fixed;
	background-image: url("ref3.jpg");
	background-size: cover;
	background-position: center;
	z-index: 1;
	display: block;
}

/*—————————————*/


.background_4
{
	height: 100vh;
	float: left;
	position: relative;
	z-index: 10000;
}

.bg_04
{
	width: 100%;
	height: 100vh;
	position: fixed;
	background-image: url("ref4.gif");
	background-size: cover;
	background-position: center;
	z-index: 1;
	display: none;
}

.background_4:hover
{
	height: 100vh;
	float: left;
	position: relative;
	z-index: 10000;
}

.background_4:hover ~ .bg_04
{
	width: 100%;
	height: 100vh;
	position: fixed;
	background-image: url("ref4.gif");
	background-size: cover;
	background-position: center;
	z-index: 1;
	display: block;
}

/*—————————————*/

.background_5
{
	height: 100vh;
	float: left;
	position: relative;
	z-index: 10000;
}

.bg_05
{
	width: 100%;
	height: 100vh;
	position: fixed;
	background-image: url("ref5.jpg");
	background-size: cover;
	background-position: center;
	z-index: 1;
	display: none;
}

.background_5:hover
{
	height: 100vh;
	float: left;
	position: relative;
	z-index: 10000;
}

.background_5:hover ~ .bg_05
{
	width: 100%;
	height: 100vh;
	position: fixed;
	background-image: url("ref5.jpg");
	background-size: cover;
	background-position: center;
	z-index: 1;
	display: block;
}


/*—————————————*/


.background_6
{
	height: 100vh;
	float: left;
	position: relative;
	z-index: 10000;
}

.bg_06
{
	width: 100%;
	height: 100vh;
	position: fixed;
	background-image: url("ref6.gif");
	background-size: cover;
	background-position: center;
	z-index: 1;
	display: none;
}

.background_6:hover
{
	height: 100vh;
	float: left;
	position: relative;
	z-index: 10000;
}

.background_6:hover ~ .bg_06
{
	width: 100%;
	height: 100vh;
	position: fixed;
	background-image: url("ref6.gif");
	background-size: cover;
	background-position: center;
	z-index: 1;
	display: block;
}


/*—————————————*/

.background_7
{
	height: 100vh;
	float: left;
	position: relative;
	z-index: 10000;
}

.bg_07
{
	width: 100%;
	height: 100vh;
	position: fixed;
	background-image: url("ref7.jpg");
	background-size: cover;
	background-position: center;
	z-index: 1;
	display: none;
}

.background_7:hover
{
	height: 100vh;
	float: left;
	position: relative;
	z-index: 10000;
}

.background_7:hover ~ .bg_07
{
	width: 100%;
	height: 100vh;
	position: fixed;
	background-image: url("ref7.jpg");
	background-size: cover;
	background-position: center;
	z-index: 1;
	display: block;
}



/*—————————————*/


.background_8
{

	height: 100vh;
	float: left;
	position: relative;
	z-index: 10000;
}

.bg_08
{
	width: 100%;
	height: 100vh;
	position: fixed;
	background-image: url("ref8.jpg");
	background-size: cover;
	background-position: center;
	z-index: 1;
	display: none;
}

.background_8:hover
{
	height: 100vh;
	float: left;
	position: relative;
	z-index: 10000;
}

.background_8:hover ~ .bg_08
{
	width: 100%;
	height: 100vh;
	position: fixed;
	background-image: url("ref8.jpg");
	background-size: cover;
	background-position: center;
	z-index: 1;
	display: block;
}





/*Breakpoints*/

@media only screen and (max-width: 600px) {
	
	.wd-25
{
	width: 100%;
	flex: wrap;
}

.wd-33
{
	width: 75%;
	flex: wrap;
}

.wd-50
{
	width: 75%;
	flex: wrap;
}

.wd-66
{
	width: 75%;
	flex: wrap;
}


body {
    width: 100%;

}

.hover
{
	display: none;
}

.mov img 
{
	width: 100%;
	height: auto;
	position: fixed;
	top: 45%;
	transform: translateY(-50%);
	display: block;
}

.header_nav {
    position: fixed;
    z-index: 10;
    padding-top: 3vh;
    width: 90% !important;
    display: flex;
    font-size: 17px;
    left: 50%;
    transform: translateX(-50%);
  }

  .footer_nav
{
	width: 90% !important;
}

.project_prev img
{
    position: fixed;
    width: 80%;
    height:auto;
    z-index: 110;
    top: 50%;
    left: 50%;
    z-index: -10;
    transform: translate(-50%, -50%);
    display:none;
}

.about
{
	width: 90%;
	padding-left:5%;
	padding-right: 5%;
	margin-top: 80px;
	margin-bottom: 40px;
}




}

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



body {
    width: 100%;
    padding-top: 2%;
    padding-bottom: 2%;

}

.header_nav {
    position: fixed;
    z-index: 10;
    padding-top: 3vh;
    width: 90% !important;
    display: flex;
    font-size: 17px;
    left: 50%;
    transform: translateX(-50%);
  }

  .footer_nav
{

	width: 90% !important;
}

.project_prev img
{
    position: fixed;
    width: 80%;
    height:auto;
    z-index: 110;
    top: 50%;
    left: 50%;
    z-index: -10;
    transform: translate(-50%, -50%);
}

.none {
	display: none ;
}

.flex
{
	flex-wrap: wrap;
	width: 300px !important;
}



}