@charset "utf-8";
/* CSS Document */

/* RESET */




@font-face {
	
    font-family: "Cormorant Garamond";
	
    src: url("fonts/CormorantGaramond-Light.ttf") format("truetype");
	
    font-weight: 300;
	
    font-style: normal;
}




@font-face {
	
    font-family: "Cormorant Garamond";
	
    src: url("fonts/CormorantGaramond-Regular.ttf") format("truetype");
	
    font-weight: 400;
	
    font-style: normal;
}




@font-face {
	
    font-family: "Arial Local";
	
    src: url("fonts/Arial.ttf") format("truetype");
	
    font-weight: 400;
	
    font-style: normal;
}




@font-face {
	
    font-family: "Arial Local";
	
    src: url("fonts/Arial-Bold.ttf") format("truetype");
	
    font-weight: 700;
	
    font-style: normal;
}















header{
	
    width:100%;

    display:flex;
	
    justify-content:space-between;
	
    align-items:flex-start;

    padding:35px 20px;

    font-size:12px;

    letter-spacing:1px;

    position:relative;
}








.header-left{
	
    display:flex;

    gap:55px;

    align-items:flex-start;
}






.works-container{
	
    width:100%;
	
    padding:150px 80px;

    display:flex;
	
    justify-content:center;
	
    align-items:flex-start;
	
    gap:90px;
}









.project{
	
    display:flex;
	
    flex-direction:column;
	
    align-items:flex-start;

    text-decoration:none;
	
    color:black;
}











.project-title{
	
    width:100%;

    font-family:"Arial Local", Arial, sans-serif;
	
    font-size:14px;
	
    font-weight:500;

    text-transform:uppercase;
	
    text-align:left;

    margin-bottom:10px;

    opacity:1;
}












.project img{
	
    width:auto;
	
    height:auto;

    max-width:170px;

    display:block;

    opacity:.3;

    transition:.4s ease;
}





.project:hover img{
	
    opacity:1;
}













.project-number{
	
    width:100%;
	
    text-align:center;

    margin-top:12px;

    font-family:"Arial Local", Arial, sans-serif;
	
    font-size:14px;
}



.project:hover .project-number{
    opacity:1;
}


















@media screen and (max-width:768px){
	
	
	
.logo{
	
    position:relative;
	
    left:auto;
	
    transform:none;

    font-size:37px !important;

    margin:10px 0;
		
	margin-top: -5px;

    white-space:nowrap;
		
}
	
	
	
		
.header-right{
	
    display:flex;
	
    flex-direction:column;
	
    gap:15px;
	
    align-items:flex-start;
	
	margin-top: 15px;
}
    
	
	
	
	
.contact{
		
		margin-top: 10px;
	}
	
	
	
	

.works-container{

    display:flex;
	
    flex-direction:column;

    align-items:center;

    gap:45px;

    padding:120px 20px 50px;
}
	
	

	
.project{

    width:100%;

	
    display:flex;
	
    flex-direction:column;

    align-items:center;
}
	
	
	

.project-title{

    width:100%;

    text-align:center;

    font-size:18px;

    margin-bottom:15px;
}

	
	
	
.project img{

    width:100%;

    max-width:320px;

    height:auto;
}

	
	
	
	
	
	
	
.project-number{

    margin-top:12px;

    text-align:center;
}

}