/* Fonts */
/*
@font-face {
  font-family: 'Rubik';
  src: url('/static/FILLLLLLLL/fonts/Rubik-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/

h1, h2, h3, h4{
	font-family: Arial;
}

p, a, input, li{
	font-family: Arial;
}


/* Colors */

h1, h2, h3, h4, a, p, .c1{
	color: black;
}

.c2{
	color: white;
}

.cb{
	color: #000;
}

.cw{
	color: #fefefe;
}


/* Background Colors */

.bg-1{
	background-color: white;
}

.bg-2{
	background-color: black;
}

/* Font-size */

h1, .h1{
	font-size: clamp(18px, 6vw, 48px);
}

h2, .h2{
	font-size: clamp(13.5px, 5.5vw, 36px);
}

h3, .h3{
	font-size: clamp(8.5px, 5vw, 28px);
}

h4, .h4{
	font-size: clamp(8px, 4vw, 24px);
}

.h5, p, input{
	font-size: clamp(6.5px, 3.4vw, 20px);
}

.h6{
	font-size: clamp(6px, 3vw, 16px);
}

/* Page Spacing */

body, header, footer, .sec{
	width: 100%;

}

.sec{
	position: relative;

	display: flex;
	justify-content: center;
}

.bg-img{
	position: absolute;
}

.w90{
	position: absolute;

	width: 90%;
}

.lm6{
	position: absolute;
	left: 16.6%;
}

.tm2{
	top: 2rem;
}

.w3{
	width: 33.3%;
}

.w6{
	width: 66.6%;
}

/* Img */

img, picture, source{
	width: 100%;

	object-fit: cover;
	object-position: center;
}

/* No margin, no staff */

body, li, ul, .no-m{
	margin: 0;
}

a{
	color: inherit;
	text-decoration: none;
}

ul{
	list-style: none;
}

/* Nav */
header{
	height: 4rem;
}

nav{
	position: fixed;
	z-index: 100;

	width: 100%;
	height: 4rem;
}

#nav{
	height: 3rem;

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

	padding: .6rem 1rem .4rem;
}

#logo-and-name{
	display: flex;
}

#nav-logo{
	margin-right: 1rem;
	height: 2.5rem;
}

#nav-btn{
	border-radius: 2px;

	max-height: 2.5rem;

	padding: .2rem .5rem;
	display: flex;
	align-items: center; 
}

#nav-ham{
	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 2.5rem;
}

#nav-ham-img{
	height: 2.5rem;
}

#nav-list{
	position: fixed;
	right: -110vw;
	z-index: 100;

	width: 100vw;
	height: calc(100vh - 4rem);
}

.nav-li{
	margin-left: calc(2vw + 2rem);
}

#nav-menu{
  opacity: 1;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.nav-menu-show{
  transform: translateX(-110vw);
  opacity: 0;
}

#open-nav-sub-menu-img{
	display: none;
}

@media screen and (min-width: 1300px) {

/* Nav */
nav{
	display: flex;
}

#nav{
	flex-grow: 1;
}

#nav-ham{
	visibility: hidden;
}

#nav-menu{
	opacity: 1;
	transform: none;
}

#nav-list{
	position: static;

	height: auto;
	width: auto;

	display: flex;
	padding-left: 0;
}

.nav-li{
	margin: 1.3rem .7rem 0;
}

#nav-sub-menu{
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.nav-menu-sub-hide{
  opacity: 0;
}

#open-nav-sub-menu-img{
	display: inline;

	height: 1rem;
	width: 1rem;
}

#nav-sub-list{
	position: fixed;
	right: 5rem;

	padding: .8rem 1.6rem .8rem 1.2rem;
}

.nav-sub-li{
	margin: .2rem;
}




}