/* For Big Tablets to 1200px (widths smaller that 1140px row)*/

@media only screen and (min-width: 1024px) and (max-width: 1200px) {


  /*------------MENU HAMBURGER------------*/
  input {
    display: block;
  }
  body {
    margin: 0;
    padding: 0;
    background: #fff;
    color: #212121;
  }
  a {
    text-decoration: none;
    color: #232323;
  }
  a:hover {
    color: tomato;
  }
  #menuToggle {
    display: block;
    position: relative;
    top: 23px;
    left: 0px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
  }
  #menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none;
  }
  #menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #212121;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
  }
  #menuToggle span:first-child {
    transform-origin: 0% 0%;
  }
  #menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
  }
  #menuToggle input:checked~span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
  }
  #menuToggle input:checked~span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }
  #menuToggle input:checked~span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
  }
  #menu {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-top: 20px;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-left: 50px;
    background: #fafafa;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
  }
  #menu li {
    padding-top: 53px;
    padding-bottom: 10px;
    padding-left: 0;
    padding-right: 0;
    font-size: 22px;
  }
  #menuToggle input:checked~ul {
    transform: none;
  }
  .main-nav li {
    margin: 0;
    padding: 0;
  }
  .main-nav li {
    display: block;
    text-align: center;
  }
  .main-nav li a:link, .main-nav li a:visited {
    font-size: 130%;
  }


  /*----------------------------------------------------*/
  /* Home Initial Screen */
  /*----------------------------------------------------*/
  .section-home {
    background: fff;
    padding-top: 80px;
  }

  /*----------------------------------------------------*/
  /* ShowCase */
  /*----------------------------------------------------*/
.section-works-kris-basque {
    margin-top: 0px;
    padding-top: 50px;
}

  .logo-hello {
    width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
  }

  .logo-diagonal {
    width: 100%;
    height: auto;
    display: grid;
    margin-top: 10px;
  }

  .logo-dmz {
    width: 100%;
    height: auto;
    display: grid;
    margin-top: 10px;
  }

  /*----------------------------------------------------*/
  /* Contact me */
  /*----------------------------------------------------*/

  .section-contact {
    background: fff;
    padding-top: 50px;
  }
  /*----------------------------------------------------*/
  /* FOOTER */
  /*----------------------------------------------------*/
  footer {
    background-color: #F9F9F9;
    padding: 12px;
    font-size: 120%;
  }
  .footer-nav {
    float: none;
  }
}

/*----------------------------------------------------*/
/* Works - Agenda Hello */
/*----------------------------------------------------*/

.contact-button {
  padding: 8px 20px;
  border: 1px solid #212121;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 400;
  color: #212121;
}


.section-home {
  background: fff;
  padding-top: 130px;
}

.kris-basque-hero-text-box-plain-text {
    padding-top: 50px;
}


.kris-basque-hero-text-box-project-details {
    padding-top: 10px;
}


.kris-basque-project-description,
.kris-basque-project-more {
    line-height: 20px;
}

/*----------------------------------------------------*/
/* VIDEO */
/*----------------------------------------------------*/

.section-works-kris-basque-video {
    padding-top: 40px;
}

/*----------------------------------------------------*/
/* The Challenge */
/*----------------------------------------------------*/

.hero-text-box-capitules {
  padding-top: 50px;
}

.kris-basque-hero-text-box-plain-text {
    padding-top: 40px;
}

/*----------------------------------------------------*/
/* Hello Planing */
/*----------------------------------------------------*/

.hello-planing {
  padding-top: 10px;
}

.hello-planing-image-2 {
  padding-top: 10px;
}

/*----------------------------------------------------*/
/* Hello Planing */
/*----------------------------------------------------*/

.planing-descripition {
    padding-top: 30px;
}

/*----------------------------------------------------*/
/* Design Process */
/*----------------------------------------------------*/

.planing-descripition {
    padding-top: 30px;
}
.section-works-kris-basque-design-process__padding {
  padding-top: 50px;
}

.hero-text-box-capitules {
    padding-top: 50px;
}

.section-works-kris-basque-design-process__padding {
    padding-top: 50px;
}

/*----------------------------------------------------*/
/* Naming & Branding */
/*----------------------------------------------------*/

.kris-basque-hero-text-box-plain-text2 {
    padding-top: 50px;
}

.section-anuncio_hello {
    padding-top: 50px;
}

/*----------------------------------------------------*/
/* Website */
/*----------------------------------------------------*/

.section-works-kris-basque-website-screenshot {
    padding-top: 50px;
}

.section-home-conclusion {
    padding-top: 70px;
    padding-bottom: 80px;
}

/*----------------------------------------------------*/
/* Profile Kris */
/*----------------------------------------------------*/

/* For Small Tablets to big Tablets from: 768px to 1023px*/

@media only screen and (min-width: 768px) and (max-width: 1023px) {

  legend {
    color: #ffffff;
    margin-bottom: 10px;
    text-align: center;
  }

  button {
    padding: 8px 80px;
    margin-top: 20px;
    margin-bottom: 90px;
  }

  /*------------MENU HAMBURGER------------*/
  input {
    display: block;
  }
  body {
    margin: 0;
    padding: 0;
    background: #fff;
    color: #212121;
  }
  a {
    text-decoration: none;
    color: #232323;
  }
  a:hover {
    color: tomato;
  }
  #menuToggle {
    display: block;
    position: relative;
    top: 23px;
    left: 0px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
  }
  #menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none;
  }
  #menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #212121;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
  }
  #menuToggle span:first-child {
    transform-origin: 0% 0%;
  }
  #menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
  }
  #menuToggle input:checked~span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
  }
  #menuToggle input:checked~span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }
  #menuToggle input:checked~span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
  }
  #menu {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    /* margin-top: -100px; */
    margin-right: 0px;
    margin-bottom: 0px;
    /* margin-left: -167px; */
    padding-top: 125px;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-left: 50px;
    background: #fafafa;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
  }
  #menu li {
    padding-top: 53px;
    padding-bottom: 10px;
    padding-left: 0;
    padding-right: 0;
    font-size: 22px;
  }
  #menuToggle input:checked~ul {
    transform: none;
  }
  .main-nav li {
    margin: 0;
    padding: 0;
  }
  .main-nav li {
    display: block;
    text-align: center;
  }
  .main-nav li a:link, .main-nav li a:visited {
    font-size: 130%;
  }


  /*----------------------------------------------------*/
  /* Home Initial Screen */
  /*----------------------------------------------------*/

  .section-home {
    background: fff;
    padding-top: 80px;
  }

  .hero-text-box p {
    padding-right: 80px;
    padding-top: 20px;
  }

  /*----------------------------------------------------*/
  /* ShowCase */
  /*----------------------------------------------------*/

.section-works-kris-basque {
    margin-top: 0px;
    padding-top: 50px;
}

  .logo-hello {
    width: 100%;
    height: auto;
    display: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
  }

  .logo-hello-responsive{
       display: block;
   }

  .logo-diagonal {
    width: 100%;
    height: auto;
    display: grid;
    margin-top: 10px;
  }

  .logo-dmz {
    width: 100%;
    height: auto;
    display: grid;
    margin-top: 10px;
  }

 

  /*----------------------------------------------------*/
  /* Contact me */
  /*----------------------------------------------------*/

  .section-contact {
    background: fff;
    padding-top: 50px;
  }

  /*----------------------------------------------------*/
  /* FOOTER */
  /*----------------------------------------------------*/

  footer {
    background-color: #F9F9F9;
    padding: 12px;
    font-size: 120%;
  }

  .footer-nav {
    float: none;
  }
}

/*----------------------------------------------------*/
/* Works - Agenda Hello */
/*----------------------------------------------------*/

.contact-button {
  padding: 8px 20px;
  border: 1px solid #212121;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 400;
  color: #212121;
}


.section-home-header {
    padding-top: 110px;
}

.adjust-class-wibd-title {
    padding-bottom: 30px;
}

.section-works-kris-basque {
    padding-top: 30px;
}

.planing-padding-bottom {
    padding-bottom: 0px;
}

.images-padding-top {
    padding-top: 30px;
}



.section-works-kris-basque-website-screenshot {
    padding-top: 30px !important;
    width: 80% !important;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.images-padding-top {
    padding-top: 30px;
}

.section-home-conclusion {
    padding-top: 0px;
    padding-bottom: 50px;
}

.adjust-class-wibd-title2 {
    padding-bottom: 30px;
}

.adjust-class-wibd-title {
    padding-bottom: 0px;
}

/*----------------------------------------------------*/
/* Naming & Branding */
/*----------------------------------------------------*/

.kris-basque-hero-text-box-plain-text2 {
    padding-top: 50px;
}

.section-anuncio_hello {
    padding-top: 50px;
}


/*----------------------------------------------------*/
/* Profile Kris */
/*----------------------------------------------------*/


.section-how-everything-started {
    padding-top: 60px;
}

/* For Small iPads from: 481px to 767px*/

@media only screen and (min-width: 481px) and (max-width: 767px) {


  .middle-class-temporary-correction {
      padding-top: 15px;
      padding-bottom: 15px;
  }

  /*------------MENU HAMBURGER------------*/
  input {
    display: block;
  }
  body {
    margin: 0;
    padding: 0;
    background: #fff;
    color: #212121;
  }
  a {
    text-decoration: none;
    color: #232323;
  }
  a:hover {
    color: tomato;
  }
  #menuToggle {
    display: block;
    position: relative;
    top: 23px;
    left: 0px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
  }
  #menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none;
  }
  #menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #212121;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
  }
  #menuToggle span:first-child {
    transform-origin: 0% 0%;
  }
  #menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
  }
  #menuToggle input:checked~span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
  }
  #menuToggle input:checked~span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }
  #menuToggle input:checked~span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
  }
  #menu {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    /* margin-top: -100px; */
    margin-right: 0px;
    margin-bottom: 0px;
    /* margin-left: -167px; */
    padding-top: 125px;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-left: 50px;
    background: #fafafa;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
  }
  #menu li {
    padding-top: 53px;
    padding-bottom: 10px;
    padding-left: 0;
    padding-right: 0;
    font-size: 22px;
  }
  #menuToggle input:checked~ul {
    transform: none;
  }
  .main-nav li {
    margin: 0;
    padding: 0;
  }
  .main-nav li {
    display: block;
    text-align: center;
  }
  .main-nav li a:link, .main-nav li a:visited {
    font-size: 130%;
  }

  /*----------------------------------------------------*/
  /* Home Initial Screen */
  /*----------------------------------------------------*/

  .section-home-header {
     padding-top: 100px;
 }

 .images-padding-top {
    padding-top: 30px;
}

h1 {
    font-family: "Roboto";
    font-size: 34px;
    font-weight: 200;
    letter-spacing: -0.2px;
    color: #393939;
}

.big-fonts {
    font-family: "Roboto";
    font-size: 34px;
    font-weight: 200;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: -0.2px;
    color: #393939;
}

  /*----------------------------------------------------*/
  /* ShowCase */
  /*----------------------------------------------------*/

  .section-works-kris-basque {
    margin-top: 0px;
    padding-top: 50px;
  }

  .logo-hello {
    width: 100%;
    height: auto;
    display: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
  }

  .logo-hello-responsive{
       display: block;
   }

  .logo-diagonal {
    width: 100%;
    height: auto;
    display: grid;
    margin-top: 10px;
  }

  .logo-dmz {
    width: 100%;
    height: auto;
    display: grid;
    margin-top: 10px;
  }

  /*----------------------------------------------------*/
  /* Contact me */
  /*----------------------------------------------------*/

  .section-contact {
    background: fff;
    padding-top: 50px;
  }
  /*----------------------------------------------------*/
  /* FOOTER */
  /*----------------------------------------------------*/
  footer {
    background-color: #F9F9F9;
    padding: 12px;
    font-size: 120%;
  }
  .footer-nav {
    float: none;
  }
  /*----------------------------------------------------*/
  /* Works - Agenda Hello */
  /*----------------------------------------------------*/



  .section-home-header {
      padding-top: 110px;
  }

  .adjust-class-wibd-title {
      padding-bottom: 20px;
  }

  .section-works-kris-basque {
      padding-top: 20px;
  }

  .planing-padding-bottom {
      padding-bottom: 0px;
  }

  .images-padding-top {
      padding-top: 20px;
  }

  .adjust-class-wibd-title-general {
      padding-bottom: 20px;
      padding-top: 20px;
  }

  .section-works-kris-basque-website-screenshot {
      padding-top: 30px !important;
      width: 80% !important;
      height: auto;
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
  .images-padding-top {
      padding-top: 20px;
  }

  .section-home-conclusion {
      padding-top: 0px;
      padding-bottom: 50px !important;
  }


  .adjust-class-wibd-title2 {
      padding-bottom: 20px;
  }

  .adjust-class-wibd-title {
      padding-bottom: 0px;
  }

  }




/* For Small phones from: 374 to 480px*/

@media only screen and (min-width: 375px) and (max-width: 480px) {
  /* Navigation - Menu Hamburger */
  .middle-class-temporary-correction {
      padding-top: 15px;
      padding-bottom: 15px;
  }

  /*------------MENU HAMBURGER------------*/
  input {
    display: block;
  }
  body {
    margin: 0;
    padding: 0;
    background: #fff;
    color: #212121;
  }
  a {
    text-decoration: none;
    color: #232323;
  }
  a:hover {
    color: tomato;
  }
  #menuToggle {
    display: block;
    position: relative;
    top: 23px;
    left: 0px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
  }
  #menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none;
  }
  #menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #212121;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
  }
  #menuToggle span:first-child {
    transform-origin: 0% 0%;
  }
  #menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
  }
  #menuToggle input:checked~span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
  }
  #menuToggle input:checked~span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }
  #menuToggle input:checked~span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
  }
  #menu {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    /* margin-top: -100px; */
    margin-right: 0px;
    margin-bottom: 0px;
    /* margin-left: -167px; */
    padding-top: 85px;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-left: 50px;
    background: #fafafa;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
  }
  #menu li {
    padding-top: 30px;
    padding-bottom: 10px;
    padding-left: 0;
    padding-right: 0;
    font-size: 22px;
  }
  #menuToggle input:checked~ul {
    transform: none;
  }
  .main-nav li {
    margin: 0;
    padding: 0;
  }
  .main-nav li {
    display: block;
    text-align: center;
  }
  .main-nav li a:link, .main-nav li a:visited {
    font-size: 130%;
  }

  /*----------------------------------------------------*/
  /* Home Initial Screen */
  /*----------------------------------------------------*/

  .section-home-header {
     padding-top: 100px;
 }

 .images-padding-top {
    padding-top: 30px;
}

h1 {
    font-family: "Roboto";
    font-size: 34px;
    font-weight: 200;
    letter-spacing: -0.2px;
    color: #393939;
}

.big-fonts {
    font-family: "Roboto";
    font-size: 34px;
    font-weight: 200;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: -0.2px;
    color: #393939;
}

  /*----------------------------------------------------*/
  /* ShowCase */
  /*----------------------------------------------------*/

.section-works-kris-basque {
    margin-top: 0px;
    padding-top: 50px;
}

  .logo-hello {
    width: 100%;
    height: auto;
    display: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
  }

  .logo-hello-responsive{
       display: block;
   }

  .logo-diagonal {
    width: 100%;
    height: auto;
    display: grid;
    margin-top: 10px;
  }

  .logo-dmz {
    width: 100%;
    height: auto;
    display: grid;
    margin-top: 10px;
  }

  /*----------------------------------------------------*/
  /* Contact me */
  /*----------------------------------------------------*/

  .section-contact {
    background: fff;
    padding-top: 30px;
  }

  .logo-linkedin {
    margin-bottom: 45px;
}
  /*----------------------------------------------------*/
  /* FOOTER */
  /*----------------------------------------------------*/
  footer {
    background-color: #F9F9F9;
    padding: 0px;
    font-size: 120%;
  }
  .footer-nav {
    float: none;
  }
  /*----------------------------------------------------*/
  /* Works - Agenda Hello */
  /*----------------------------------------------------*/



  .section-home-header {
      padding-top: 110px;
  }

  .adjust-class-wibd-title {
      padding-bottom: 20px;
  }

  .section-works-kris-basque {
      padding-top: 20px;
  }

  .planing-padding-bottom {
      padding-bottom: 0px;
  }

  .images-padding-top {
      padding-top: 20px;
  }

  .adjust-class-wibd-title-general {
      padding-bottom: 20px;
      padding-top: 20px;
  }

  .section-works-kris-basque-website-screenshot {
      padding-top: 30px !important;
      width: 80% !important;
      height: auto;
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
  .images-padding-top {
      padding-top: 20px;
  }

  .section-home-conclusion {
      padding-top: 0px;
      padding-bottom: 50px !important;
  }


  .adjust-class-wibd-title2 {
      padding-bottom: 20px;
  }

  .adjust-class-wibd-title {
      padding-bottom: 0px;
  }
}


/* For Small phones from: 320 to 375px*/

@media only screen and (min-width: 320px) and (max-width: 374px) {
  /* Navigation - Menu Hamburger */
  .middle-class-temporary-correction {
      padding-top: 15px;
      padding-bottom: 15px;
  }

  /*------------MENU HAMBURGER------------*/
  input {
    display: block;
  }
  body {
    margin: 0;
    padding: 0;
    background: #fff;
    color: #212121;
  }
  a {
    text-decoration: none;
    color: #232323;
    transition: color 0.3s ease, backgroundColor 3s ease;
  }
  a:hover {
    color: tomato;
  }
  #menuToggle {
    display: block;
    position: relative;
    top: 23px;
    left: 0px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
  }
  #menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none;
  }
  #menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #212121;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
  }
  #menuToggle span:first-child {
    transform-origin: 0% 0%;
  }
  #menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
  }
  #menuToggle input:checked~span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
  }
  #menuToggle input:checked~span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }
  #menuToggle input:checked~span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
  }
  #menu {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    /* margin-top: -100px; */
    margin-right: 0px;
    margin-bottom: 0px;
    /* margin-left: -167px; */
    padding-top: 45px;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-left: 50px;
    background: #fafafa;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
  }
  #menu li {
    padding-top: 15px;
    padding-bottom: 10px;
    padding-left: 0;
    padding-right: 0;
    font-size: 22px;
  }
  #menuToggle input:checked~ul {
    transform: none;
  }
  .main-nav li {
    margin: 0;
    padding: 0;
  }
  .main-nav li {
    display: block;
    text-align: center;
  }
  .main-nav li a:link, .main-nav li a:visited {
    font-size: 130%;
  }

  /*----------------------------------------------------*/
  /* Home Initial Screen */
  /*----------------------------------------------------*/
  .section-home-header {
     padding-top: 100px;
 }

 .images-padding-top {
    padding-top: 30px;
}

h1 {
    font-family: "Roboto";
    font-size: 34px;
    font-weight: 200;
    letter-spacing: -0.2px;
    color: #393939;
}

.big-fonts {
    font-family: "Roboto";
    font-size: 34px;
    font-weight: 200;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: -0.2px;
    color: #393939;
}

  /*----------------------------------------------------*/
  /* ShowCase */
  /*----------------------------------------------------*/

.section-works-kris-basque {
    margin-top: 0px;
    padding-top: 50px;
}

  .logo-hello {
    width: 100%;
    height: auto;
    display: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
  }

  .logo-hello-responsive{
       display: block;
   }

  .logo-diagonal {
    width: 100%;
    height: auto;
    display: grid;
    margin-top: 10px;
  }

  .logo-dmz {
    width: 100%;
    height: auto;
    display: grid;
    margin-top: 10px;
  }

  /*----------------------------------------------------*/
  /* Contact me */
  /*----------------------------------------------------*/

  .section-contact {
    background: fff;
    padding-top: 30px;
  }

  .logo-linkedin {
    margin-bottom: 45px;
}
  /*----------------------------------------------------*/
  /* FOOTER */
  /*----------------------------------------------------*/
  footer {
    background-color: #F9F9F9;
    padding: 0px;
    font-size: 120%;
  }
  .footer-nav {
    float: none;
  }
  /*----------------------------------------------------*/
  /* Works - Agenda Hello */
  /*----------------------------------------------------*/



  .section-home-header {
      padding-top: 110px;
  }

  .adjust-class-wibd-title {
      padding-bottom: 20px;
  }

  .section-works-kris-basque {
      padding-top: 20px;
  }

  .planing-padding-bottom {
      padding-bottom: 0px;
  }

  .images-padding-top {
      padding-top: 20px;
  }

  .adjust-class-wibd-title-general {
      padding-bottom: 20px;
      padding-top: 20px;
  }

  .section-works-kris-basque-website-screenshot {
      padding-top: 30px !important;
      width: 80% !important;
      height: auto;
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
  .images-padding-top {
      padding-top: 20px;
  }

  .section-home-conclusion {
      padding-top: 0px;
      padding-bottom: 50px !important;
  }


  .adjust-class-wibd-title2 {
      padding-bottom: 20px;
  }

  .adjust-class-wibd-title {
      padding-bottom: 0px;
  }

}

.visible-md-only {
    display: none !important;
}
@media only screen and (min-width: 768px) {
    .visible-md-only {
        display: block !important;
    }
}

.visible-sm-only {
    display: none !important;
}

@media only screen and (max-width: 767px) {
    .visible-sm-only {
        display: block !important;
    }
}

.hide-between-1024-1100 {
    display: block !important;
}
@media only screen and (min-width: 1024px) and (max-width: 1100px) {
    .hide-between-1024-1100 {
        display: none !important;
    }
}


.visible-between-1024-1100 {
    display: none !important;
}
@media only screen and (min-width: 1024px) and (max-width: 1100px) {
    .visible-between-1024-1100 {
        display: block !important;
    }
}

.visible-ipad-only {
    display: none !important;
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .visible-ipad-only {
        display: block !important;
    }
}