header {
   width: 100%;
   height: auto;
   position: fixed;
   top: 0px;
   left: 0px;
   background-color: #FFF;
   border-bottom: solid 1px #333A;
   -o-border-bottom: solid 1px #333A;
   -moz-border-bottom: solid 1px #333A;
   -webkit-border-bottom: solid 1px #333A;
   box-shadow: 0px 0px 10px #000A;
   -webkit-box-shadow: 0px 0px 10px #000A;
   position: sticky;
   -webkit-position: sticky;
   top: 0px;
   z-index: 999;
}

.desktop {
   display: block;
}

.mobile {
   display: none;
}

.logo {
   height: 100px;
   margin: 10px 50px;
   transition: all 1s;
   -moz-transition: all 1s;
   -webkit-transition: all 1s;
}

.logo::selection {
   user-select: none;
   -ms-user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
}

.name {
   color: #273B7B;
   font-size: 21px;
   left: 200px;
   width: 422px;
   position: absolute;
   top: 10px;
   cursor: default;
   transition: all 1s;
   -moz-transition: all 1s;
   -webkit-transition: all 1s;
}

nav {
   display: flex;
   -ms-display: flex;
   -moz-display: flex;
   -webkit-display: flex;
   flex-direction: row;
   -ms-flex-direction: row;
   -moz-flex-direction: row;
   -webkit-flex-direction: row;
   justify-content: flex-end;
   -ms-justify-content: flex-end;
   -moz-justify-content: flex-end;
   -webkit-justify-content: flex-end;
   position: absolute;
   right: 80px;
   top: 65px;
   transition: all 1s;
   -moz-transition: all 1s;
   -webkit-transition: all 1s;
}

.item {
   color: #605E5E;
   margin: 15px;
   text-decoration: none;
   -webkit-text-decoration: none;
   font-size: 18px;
   font-weight: lighter;
   transform: scale(1);
   -ms-transform: scale(1);
   -moz-transform: scale(1);
   -webkit-transform: scale(1);
   transition: all 0.2s ease, font-size 1s ease;
   -moz-transition: all 0.2s ease, font-size 1s ease;
   -webkit-transition: all 0.2s ease, font-size 1s ease;
}

.item:hover {
   color: #273B7B;
   border-bottom: solid 1px #273B7B;
   -o-border-bottom: solid 1px #273B7B;
   -moz-border-bottom: solid 1px #273B7B;
   -webkit-border-bottom: solid 1px #273B7B;
   transform: scale(1.2);
   -ms-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -webkit-transform: scale(1.2);
   transition: all 0.2s ease, font-size 1s ease;
   -moz-transition: all 0.2s ease, font-size 1s ease;
   -webkit-transition: all 0.2s ease, font-size 1s ease;
}

.lang {
   width: 75px;
   height: 100%;
   position: absolute;
   top: 0px;
   right: 0px;
   display: flex;
   -ms-display: flex;
   -moz-display: flex;
   -webkit-display: flex;
   flex-direction: column;
   -ms-flex-direction: column;
   -moz-flex-direction: column;
   -webkit-flex-direction: column;
   justify-content: space-around;
   padding: 25px 0px;
}

.lang a {
   background-position:left bottom;
   color: #605E5E;
   text-decoration: none;
   -webkit-text-decoration: none;
   margin: 0px;
   text-align: right;
   transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -webkit-transition: all 0.2s ease-in-out;
}

.lang a:hover {
   color: #FFF;
   background: linear-gradient(to left, #273B7B, transparent);
   background-size: 500% 100%;
   -webkit-background-size: 500% 100%;
   background-position:right bottom;
   padding-right: 50px;
   transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -webkit-transition: all 0.2s ease-in-out;
}

.minimize .logo {
   height: 40px;
   margin: 10px;
}

.minimize .name {
   position: absolute;
   left: 65px;
   top: -10px;
}

.minimize nav {
   position: absolute;
   right: 80px;
   top: 25px;
}

.minimize nav .item {
   font-size: 15px;
   transition: all 0.2s ease, font-size 1s ease;
   -moz-transition: all 0.2s ease, font-size 1s ease;
   -webkit-transition: all 0.2s ease, font-size 1s ease;
}

#nav-icon {
   display: hidden;
   position: absolute;
   top: 15px;
   right: 0px;
   width: 60px;
   height: 45px;
   transform: rotate(0deg);
   -o-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -webkit-transition: all 0.5s ease-in-out;
}

#nav-icon span {
   display: block;
   position: absolute;
   height: 5px;
   width: 80%;
   background: #111;
   border-radius: 20px;
   opacity: 1;
   left: 0;
   transform: rotate(0deg);
   -o-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   transition: all 0.25s ease-in-out;
   -o-transition: all 0.25s ease-in-out;
   -moz-transition: all 0.25s ease-in-out;
   -webkit-transition: all 0.25s ease-in-out;
}

#nav-icon span:nth-child(1) {
   top: 0px;
}

#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
   top: 18px;
}

#nav-icon span:nth-child(4) {
   top: 36px;
}

#nav-icon.open span:nth-child(1) {
   top: 18px;
   width: 0%;
   left: 50%;
}

#nav-icon.open span:nth-child(2) {
   transform: rotate(45deg);
   -o-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3) {
   transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(4) {
   top: 18px;
   width: 0%;
   left: 50%;
}

.paginaatual {
   color: #273B7B;
   border-bottom: solid 1px #273B7B;
   -o-border-bottom: solid 1px #273B7B;
   -moz-border-bottom: solid 1px #273B7B;
   -webkit-border-bottom: solid 1px #273B7B;
   transform: scale(1.2);
   -ms-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -webkit-transform: scale(1.2);
   transition: all 0.2s ease, font-size 1s ease;
   -moz-transition: all 0.2s ease, font-size 1s ease;
   -webkit-transition: all 0.2s ease, font-size 1s ease;
}

@media screen and (max-width: 950px) {
   .desktop {
      display: none;
   }

   .mobile {
      display: block;
   }

   .minimize .icon, .icon {
      display: block;
   }

   .logo, .minimize .logo {
      height: 50px;
      margin: 10px;
   }

   .minimize nav {
      position: absolute;
      right: 0px;
      top: 75px;
   }

   .minimize nav .item {
      font-size: 20px;
   }

   nav{
      width: 100%;
      display: flex;
      -ms-display: flex;
      -moz-display: flex;
      -webkit-display: flex;
      position: absolute;
      top: 77.4px;
      right: 0px;
      background-color: #FFFD;
      visibility: hidden;
      transform: translateY(-233.4px) scaleY(0);
      flex-direction: column;
      -ms-flex-direction: column;
      -moz-flex-direction: column;
      -webkit-flex-direction: column;
      align-items: flex-end;
      -ms-align-items: flex-end;
      -moz-align-items: flex-end;
      -webkit-align-items: flex-end;
      -webkit-transition: all 0.25s ease-in-out;
      -moz-transition: all 0.25s ease-in-out;
      -o-transition: all 0.25s ease-in-out;
      transition: all 0.25s ease-in-out;
   }

   .responsive {
      visibility: visible;
      transform: translateY(0px) scaleY(1);
      -webkit-transition: all 0.25s ease-in-out;
      -moz-transition: all 0.25s ease-in-out;
      -o-transition: all 0.25s ease-in-out;
      transition: all 0.25s ease-in-out;
   }

   .item, .item:hover {
      font-size: 20px;
      font-weight: normal;
      margin: 10px 15px;
      color: #605E5E;
      border-bottom: 0px;
      -o-border-bottom: 0px;
      -moz-border-bottom: 0px;
      -webkit-border-bottom: 0px;
      transform: scale(1);
      -ms-transform: scale(1);
      -moz-transform: scale(1);
      -webkit-transform: scale(1);
      transition: all 0.2s ease, font-size 1s ease;
      -moz-transition: all 0.2s ease, font-size 1s ease;
      -webkit-transition: all 0.2s ease, font-size 1s ease;
   }

   .language {
      width: calc(100% - 15px);
      color: #605E5E;
      padding-right: 15px;
      padding-top: 10px;
      margin: 10px 0px;
      text-align: right;
      text-decoration: none;
      -webkit-text-decoration: none;
      font-size: 20px;
      font-weight: bold;
      border-top: solid 1px #333A;
      -o-border-top: solid 1px #333A;
      -moz-border-top: solid 1px #333A;
      -webkit-border-top: solid 1px #333A;
   }

   .itemLang {
      color: #605E5E;
      text-decoration: none;
      -webkit-text-decoration: none;
      margin: 5px 0px 0px 40px;
      text-align: right;
   }

   .langSel {
      color: #273B7B;
   }

   .minimize .div-social, .div-social {
      position: relative;
      top: 0px;
      right: 120px;
      height: auto;
      width: 24px;
      margin: 0px;
      display: flex;
      -ms-display: flex;
      -moz-display: flex;
      -webkit-display: flex;
      flex-direction: row;
      -ms-flex-direction: row;
      -moz-flex-direction: row;
      -webkit-flex-direction: row;
      align-items: flex-end;
      -ms-align-items: flex-end;
      -moz-align-items: flex-end;
      -webkit-align-items: flex-end;
   }

   .minimize .div-social a, .div-social a {
      margin: 5px;
   }

   .minimize .social, .social {
      height: 35px;
      margin: auto;
      border-radius: 5px;
   }
}
