:root {
  --blue: #184C8A;
  --orange: #E87A61;
  --light: #F1F8FA;
  --white: #FFFFFF;
}

@font-face {
    font-family: Bluunext Bold;
    src: url(bluunext-bold.otf);
}

body {
	font-family: David Libre;
	font-size: 16px;
	line-height: 1.5;
	
	background-color: #ffffff;
	color: #333333;
  padding-bottom: 300px;
}

header {
  background-color: var(--blue);
  padding: 20px 40px 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav a {
  font-size: 20px;
  margin-left: 16px;
  margin-right: 16px;
  color: var(--white);
  font-family: Bluunext Bold;
  text-decoration: none;
  transition: all 0.5s ease;
}

nav a:hover {
  border-bottom: 2px solid var(--white);
}

h2 {
  font-family:  Bluunext Bold;
  font-size: 72px;
  font-weight: 700;
  margin-bottom: 20px;
}

h3 {
  font-family: David Libre;
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 20px;
}

h4 {
  font-family: Bluunext Bold;
  font-size: 28px;
}

h5 {
  font-family: David Libre;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
}

.button {
  padding: 8px 16px 8px 16px;
  margin: 20px 0 20px 0;
  border: 2px solid var(--white);
  font-family: Bluunext Bold;
  font-size: 20px;
}

a.button {
  color: var(--white);
  text-decoration: none;
  transition: all 0.5s;
}

a.button:hover {
  background-color: var(--white);
  color: var(--blue);
}

.alt-button {
  padding: 8px 16px 8px 16px;
  border: 2px solid var(--blue);
  font-family: Bluunext Bold;
  font-size: 20px;
}

a.alt-button {
  color: var(--blue);
  text-decoration: none;
  transition: all 0.5s;
}

a.alt-button:hover {
  background-color: var(--blue);
  color: var(--white);
}

.hero {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  z-index: 3;
}

.holder {
  position: relative;
  top: 0;
  left: 0;
  width: 10000vw;
  height: 100vh;
  transition: left 1s;
}

.holder div {
  float: left;
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 20px 30px;
}

.slide-1 {
  background-image: url(img1.jpg);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
	font-weight: 900;
  color: var(--white);
}

.slide-2 {
  background-image: url(img0.jpg);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
	font-weight: 900;
  color: var(--white);
}

.slide-3 {
  background-image: url(img00.jpg);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
	font-weight: 900;
  color: var(--white);
}

section {
		display: flex;
  	position: relative;
  	z-index: 2;
}

.container {
  width: 50%;
}

.about {
  background-color: var(--light);
  color: var(--blue);
  height: 100vh;
  padding: 60px 60px 60px 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.concept {
  background-color: var(--light);
  color: var(--blue);
  height: 100vh;
  padding: 60px 60px 60px 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.collections {
  width: 50%;
  background-color: var(--blue);
  color: var(--white);
  height: 100vh;
  padding: 60px 60px 60px 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  
  position:sticky;
	top:0;
}

.collections h3 {
  margin-bottom: 40px;
}

.title {
  color: var(--white);
  height: 100vh;
  padding: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title h2 {
  text-transform: uppercase;
}

.img-1 {
  width: 50%;
	height:100vh;
  padding: 60px;
  background-color: var(--light);

	display: flex;
  justify-content: center;
  align-items: center;
}

.img-2 {
  height: 100vh;
  background-image: url(img3.jpg);
  background-size: cover;
  background-position: center;
}

.img-3 {
  height: 100vh;
  background-image: url(img4.jpg);
  background-size: cover;
  background-position: center;
}

.img-4 {
  height: 100vh;
  background-image: url(img5.jpg);
  background-size: cover;
  background-position: center;
}

.img-5 {
  height: 100vh;
  background-image: url(img8.jpg);
  background-size: cover;
  background-position: bottom center;
}

.block {
  background-image: url(img6.jpg);
  background-size: cover;
  background-position: top center;
  height: 70vh;
}

.full {
  background-color: var(--light);
	display: flex;
  justify-content: center;
  align-items: center;

}

.text {
  color:  var(--blue);
  text-align: center;
  padding: 100px;
}

footer {
  position:fixed;
	bottom:0;
	left:0;
	width:100%;
  color: var(--white);
  
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  
  padding: 100px 80px 80px 80px;
  
  background-color: var(--blue);
  z-index: 1;
}

footer img {
  margin-bottom: 20px;
}

footer a {
  text-decoration: none;
  color: var(--white);
  transition: all 0.5s;
}

footer a:hover {
  text-decoration: underline;
}

.footer {
  display: flex;
  flex-direction: column;
}

@media (max-width:1100px) {
    body {
    padding-bottom: 0;
  }
  .hero {
    background-position: center;
  }
  h3 {
    font-size: 24px;
  }
  .about, .img-1 {
    padding: 40px;
  }
    footer {
    position: relative;
    padding: 40px;
    display: block;
    text-align: center;
  }
}

@media (max-width:800px) {
  section {
    display: block;
  }
  h2 {
    font-size: 28px;
  }
    h5 {
    margin-top: 20px;
    margin-bottom: 8px;
  }
    .hero {
    background-position: 20% 50%;
    height: 70vh;
  }
.container {
	width: 100%;
}
  .img-1 {
    width: 100%;
  }
  .collections {
    width: 100%;
    height: 50vh;
		text-align: center;
    padding: 60px;
  }
  .about, .concept {
    padding: 20px;
    text-align: center;
    display: flex;
		flex-direction: column;
    height: 60vh;
  }
  .block {
    background-position: 30% 50%;
    height: 50vh;
  }
}

@media (max-width:620px) {
  header {
    display: block;
    text-align: center;
  }
  header img, footer img {
    margin-bottom: 20px;
  }
  nav a {
    font-size: 16px;
  }
  h3, h4 {
    font-size: 20px;
  }
  .hero {
     display: none;
  }
  .img-1 {
    height: 70vh;
  }
  .img-2,.img-3,.img-4,
  .img-5, .title,
  .concept {
    height: 50vh;
  }
  .text {
    padding: 40px;
  }
  .about {
    height: 70vh;
  }
}