html {background-color: white}

 *{
	 padding:0;
	 margin:0;
	 box-sizing: border-box;
 }
 
 ::selection{
	 
 }
 
@font-face {
	font-family: 'ErasBold';
	 src: url('itc-eras-ultra-webfont/ITC\ Eras\ Bold.woff'); 
 }
 @font-face {
	font-family: 'ErasNormal';
	 src: url('itc-eras-ultra-webfont/ITC\ Eras\ Medium.woff');
 }
  @font-face {
	font-family: 'FuturaPT';
	 src: url('futura-pt-webfont/FuturaCyrillicBook.woff'); 
 }
 body{
	 font-family: "Eras ITC", sans-serif;
 }
  body p{
	 font-family: 'FuturaPT';
 }
 body a{
	 font-family: 'FuturaPT';
 }
 body li{
	 font-family: 'FuturaPT';
 }

 @media (max-width: 1150px) {
 body{
	 font-family: 'ErasBold';
 }
 body p{
	 font-family: 'FuturaPT';
 }
 body a{
	 font-family: 'FuturaPT';
 }
}

 a{
	text-decoration: none;
 }
 ul{
	 list-style: none;
 }

.menu{
	display: flex;
	background-color:black;
	width: 100%;
	padding: 1rem 3rem;
	flex-direction: column;
	justify-content: space-between;
}

.default{
	top: 0;
	flex-grow:1;
}
 
 /*NAV MENU*/
 
 nav{
	 font-family: "FuturaPT";
	 display: grid;
	 grid-template-columns: 1fr 1fr 1fr;
	 z-index: 9999;
	 position: sticky;
	 top: 0;
	 padding: 1rem;
 }
@media (max-width: 1150px) { 
 	 nav{
		grid-template-columns: 1fr;
		padding: 0rem;
		min-height: 176px;
	 }
	.navBar{
		display: none;
	 }
	 .navImg{
		display: none;
	 }
}
.navBar{
	
}
 .navImg{
	position: relative;
	margin:auto 1rem;
 }
 nav ul{
	 display:flex;
	 align-items: center;
	 justify-content: center;
 }
 .navLink a{
	 display:inline-block;
	 padding:2rem;
	 color: black;
	 font-weight: 400;
	 font-size: 1.2rem;
	 transition: 0.3s;
 }

 .navLink a i {
	 transform: translateY(2px);
	 margin-left: 0.2rem;
 }
 
 .navLink a:hover {
	 color: gray;
 }
 .navLink{
	position: relative;
 }
 .dropdown{
	text-align:center;
	justify-content: center;
	position: absolute;
	display: none;
	background:rgb(255, 255, 255);
	z-index:5;
	width: 30%;
	min-height: 8rem;
	margin-top: 6rem;
	justify-content: space-around;
}
.dropdown li{
   border: 1px solid white;
}
.dropdown li a{
	padding:1rem;
	color:black;
	font-size: 1.2rem;
}
#drop:hover .dropdown{
	display: flex;
}

/*mobile nav*/

.hamburger{
	 display:none;
	 width: 100%;
	 color: black;
	 font-size: 5rem;
	 padding: 3rem;
	 justify-content: space-between;
	 z-index: 7;
}
.hamburger a{
	font-family: 'ErasBold';
	font-size: 4rem;
	z-index: 6;
	color: black;
}
.navContainer{
	margin: 0;
	padding: 1.5rem 3rem;
	right:0;
	top:0;
	transform: translateX(100%);
	display: none;
	flex-direction: column;
	justify-content: space-between;
	position: fixed;
	width: 100%;
	height:100%;
	background-color: white;
	z-index: 5;
	color:black;
}
.navContainer ul{
	margin-top: 16vh;
	flex-direction: column;
	align-items:flex-start;
}
.navContainer li a{
	color:black;
	font-size: 6rem;
}
.navContact{
	font-size: 2rem;
	margin-bottom: 2rem;
}
@media (max-width: 1150px) {
	.navContainer{
	display: flex;
	}
	.hamburger{
	 display:flex;
	}
}
 /*Footer*/
 
.footer{
	position: relative;
	margin: 5rem 0 2rem 0;
	padding:0 3rem;
	display:flex;
	flex-direction: column;
	width:100%;
	justify-content: space-between;
	gap:1rem;
}
.footerLine{
	 width: 100%;
	 height: 1px;
	 background-image : linear-gradient(to top, white);
}
.titaniumProducts{
	color:white;
	margin:1rem
}
.titaniumProducts h3{
	font-size: 3.5rem;
	font-weight: 900;
}
.footerLinks{
	display: flex;
	width:100%;
	margin:1rem
}
.contact{
	margin-right: 3rem;
	min-width: 20%;
}
.contact h2{
	color: white;
	font-size: 2rem;
}
.contact p{
	color: white;
	font-size: 1rem;
}
.socialMedia{
	margin-right: 3rem;
	min-width: 20%;
}
.socialMedia h2{
	color: white;
	font-size: 2rem;
}
.socialMedia a{
	color: white;
}
.socialMedia a:hover{
	color: silver;
}
.footerTorus{
	border: 1px white solid;
	padding:2rem;
	display: flex;
	justify-content: space-between;
}
.footerTorus h4{
	color: white;
	font-size: 2rem;
}
.footerLogo{
	position: absolute;
	right:3rem;
	top:2rem;
}
.footerLogo img{
	max-width: 10rem;
}
@media (max-width: 1450px){
	.titaniumProducts h3{
		font-size: 3rem;
	}
	.contact h2{
		font-size: 1.8rem;
	}
	.socialMedia h2{
		font-size: 1.8rem;
	}
}
@media (max-width: 1300px){
	.titaniumProducts h3{
		font-size: 2.5rem;
	}
	.footerTorus h4{
		font-size: 1.5rem;
	}
}
@media (max-width: 1150px) {
	.titaniumProducts h3{
		font-size: 3rem;
	}
	.footerLinks{
		flex-direction: column;
		gap: 2rem;
		line-height: 1.6;
	}
	.contact h2{
		font-size: 3rem;
	}
	.contact p{
		font-size: 3rem;
	}
	.socialMedia h2{
		font-size: 3rem;
	}
	.socialMedia a{
		font-size: 3rem;
	}
	.footerLogo{
		position: relative;
		right:0rem;
		top:0rem;
	}
	.footerLogo img{
		max-width: 15rem;
	}
	.footerTorus h4{
		color: white;
		font-size: 3rem;
	}
}
 /*content*/
 .content{
	 display:flex;
	 flex-direction:column;
	 align-items:center;
	 min-height:90vh;
	 background-color: white;
 }
 .gallery{
	width: 100%;
	padding: 5%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap:10vw;
 }
 .image{
	width: 100%;
	
 }
.image img{
	width: 100%;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}