*, *:before, *::after {
  box-sizing: border-box;
}

.principal {
  font: 300 16px/1.2 calibri;
  color: #222;
  text-align: center;

  
}

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

input[id=menuExtend] {
  display: none;
}

.header {
  width: 100%;
  
  left: 0;
  top: 0;
  z-index: 9;
  background-color: rgba(255, 0, 0, 0.1);
}
.header .row {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 2vw;
}
.header div, .header nav {
  display: flex;
}
.header .col {
  align-items: center;
}
.header a {
  text-decoration: none;
}
.header #menubar {
  height: 4vw;
  min-height: 60px;
  justify-content: space-between;
}
.header #menubar #logo {
  color: #fff;
  font-size: 1.8em;
}
.header #menubar label[for=menuExtend] {
  width: 12.5vw;
  max-width: 60px;
  min-width: 45px;
  height: 100%;
  position: relative;
}
.header #menubar label[for=menuExtend] span {
  font-size: 0;
  width: 60%;
  height: 6%;
  border-radius: 10px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.header #menubar label[for=menuExtend] span:before, header #menubar label[for=menuExtend] span:after {
  content: "";
  background-color: #fff;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  position: absolute;
  left: 0;
  transition: transform 0.2s ease-out, top 0.2s 0.2s ease-out;
}
.header #menubar label[for=menuExtend] span:before {
  top: -300%;
}
.header #menubar label[for=menuExtend] span:after {
  top: 300%;
}
.header #navbar nav a {
  color: #fff;
  font-size: 1rem;
  transition: 0.2s ease-out;
}
.header #navbar nav a:hover, header #navbar nav a.on {
  color: #c4caff;
}
.header #navbar #links a {
  width: 2rem;
  height: 2rem;
  color:white;
  position: relative;
  
  transition: 0.2s ease-out;
}
.header #navbar #links a:hover {
  border-color: transparent;
  color:black;

}
.header #navbar #links a img {
  width: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.header #navbar #links a + a {
  margin-left: 1rem;
}

section {
  padding-top: 12em;
}
section h1 {
  font-size: 5em;
  color: #e2e5ff;
  margin: 0;
}
section h1 span {
  color: #d2d7ff;
  font-size: 0.4em;
  font-weight: 100;
  font-style: italic;
  display: block;
}

@media (min-width: 1100px) {
  .header > div {
    align-items: center;
    justify-content: space-between;
  }
  .header label[for=menuExtend] {
    display: none;
  }
  .header #navbar nav a {
    margin-left: 1em;
  }
  .header #navbar #links {
    margin-left: 2.5em;
  }
}
  @media (min-width:1600 max-width: 1740.98px) 
  { 
    .logo{
    width:20%;
    }
    .header #navbar nav a { 
  color: #fff;
  font-size: .9rem;
  transition: 0.2s ease-out;
}
.links{
  font-size: .7rem;
  }
}
  @media (max-width: 1599px) 
  { 
    .logo{
    width:10%; 
    }
}
@media (max-width: 1099.98px) {
  html {
    font-size: 2vw;
  }

  .header > div {
    flex-direction: column;
  }
  .header #navbar { 
    flex: 1;
    flex-direction: column;
    padding: 0vw 10vw 20vw 10vw;
    display: none;
  }
  .header #navbar > * {
    width: 100%;
    justify-content: center;
  }
  .header #navbar nav a {
    margin-bottom: 1em;
  }
  .header #navbar #links a + a {
    margin-left: 5vw;
  }

  input[id=menuExtend]:checked + header {
    height: 100%;
    max-height: initial;
    background: linear-gradient(to right, #b1939d 0%, #a27f9d 25%, #797ab0 50%, #607fb6 75%, #5787af 100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  input[id=menuExtend]:checked + header #menubar #logo {
    opacity: 0;
    pointer-events: none;
    transition: none;
  }
  input[id=menuExtend]:checked + header #menubar label[for=menuExtend] span {
    background-color: transparent;
  }
  input[id=menuExtend]:checked + header #menubar label[for=menuExtend] span:before, input[id=menuExtend]:checked + header #menubar label[for=menuExtend] span:after {
    top: 0;
    transition: top 0.3s ease-out, transform 0.3s 0.3s ease-out;
  }
  input[id=menuExtend]:checked + header #menubar label[for=menuExtend] span:before {
    transform: rotate(45deg);
  }
  input[id=menuExtend]:checked + header #menubar label[for=menuExtend] span:after {
    transform: rotate(-45deg);
  }
  input[id=menuExtend]:checked + header #navbar {
    display: flex;
  }
  input[id=menuExtend]:checked + header #navbar nav {
    font-size: 1.875rem; 
    flex-direction: column;
    margin-bottom: 5vh;
  } 
}