.w-100 {
  width: 100%;
}
.h-100 {
  min-height: 100vh;
}
.h-50 {
  min-height: 50vh;
}

.bg-red {
  background-color: red;
}
.bg-green {
  background-color: green;
}
.bg-blue {
  background-color: blue;
}
.bg-yellow {
  background-color: yellow;
}

body {
  margin: 0;
  padding: 0;
}

.social-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* test */

.panel,
.panel2 {
  width: 100%;
  height: 100vh;
  background-color: wheat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
}

.panel-vertical,
.panel2-vertical {
  overflow: hidden;
}

.panel-vertical-inner,
.panel2-vertical-inner {
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
  padding: 0;
  overflow: hidden;
  width: 300%;
}
.panel-vertical-inner {
  background-color: rgb(69, 69, 168);
}

.panel-vertical-inner .panel,
.panel2-vertical-inner .panel {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.panel-horizontal,
.panel-horizontal {
  background-color: rgb(69, 69, 168);
  color: white;
}