@media screen and (min-width: 150px) and (max-width: 320px) {
  
  h1 { font-size: 1.1em; line-height: 1.6em; }
  h2 { font-size: 1.7em; }
  
  section { align-items: flex-start; } /*--voor driehoek en icon-big--*/
  .row-wrapper { padding: 30px 20px 30px 20px }
  
  .centerline:after { left: 20px; } /*--left: calc((100% - 1px) / 12);--*/
  
  section   {align-items: flex-start; } /*voor icoon links uitlijnen*/
  .driehoek { margin-left: 8px; }
  .icon-big { margin-left: 8px; }
  
 .row-even .skills-even, .row-even .skills-odd { width: 100%; min-width: 200px; }
  
  .row-even, .row-odd  { flex-flow: column wrap; width: 100%; min-width: 200px; margin-left: 0px; }
  .row-graduate        { flex-flow: column-reverse wrap; align-content: start; width: 100%; }
    
  .graduate-even, .graduate-odd, .graduate-center { 
    margin-left: 0;
    margin-right: 0;
  }
  
  .graduate-even:nth-of-type(n) .arrow-left {
    margin: 0 0px 15px -8px;
    padding: 0;
  }
  
  .graduate-odd:nth-of-type(n) .arrow-right {
    background-image: url(img/svg/arrow-right-orange.svg); }
  
  .graduate-txt { order: 2!important; }
  .arrow-left, .arrow-right { order: 1 !important; }
  
  .graduate-center .driehoek-small { left: 0;}
  
  .row-even .work-employer, .row-odd .work-employer { 
    justify-content: flex-end;
    align-content: flex-end;
    width: 100%; 
    min-width: 200px; 
    margin-left: -1px; 
    border-radius: 0px 5px 5px 0px;
    border-right: 1px solid rgba(51, 51, 51);
    border-left: 1px solid rgb(30, 30, 30);
  }
  
  .row-even .work-year  { width: 100%; min-width: 200px; justify-content: flex-start; margin-left: -7px; }
  .row-odd .work-year   { width: 100%; min-width: 200px; }
  
  .row-even .work-employer .employer,
  .row-odd .work-employer .employer  { text-align: right; padding: 10px 10px 10px 0px; }
 
  .row-even .work-year .arrow { padding: 0px 10px 0px 0px; margin: 0; order: 1; }
  .row-even .work-year h2     { order: 2; }
  
  .row-even .about-profile { width: 100%; }
  
  .row-even .about-number, .row-odd .about-number       { width: 100%; min-width: 200px; justify-content: flex-start; }
  .row-even .about-number h2, .row-odd .about-number h2 { padding: 10px 10px 0 30px; margin: 0 0 0 -20px; }
  
  .row-even .about-txt, .row-odd .about-txt { width: 100%; min-width: 200px; padding: 10px 0; text-align: right; }
 
    
  .row-even:nth-of-type(n) .arrow  { 
    background-image: url(img/svg/arrow-down-yellow.svg);
    margin: 5px 8px 0 0;
  }
  
  .row-odd:nth-of-type(n) .arrow  { 
    background-image: url(img/svg/arrow-down-yellow.svg);
    margin: 5px 5px 0 -8px;
  } 
  
  
  .banner {align-content: center;  width: 100%; min-width: 200px; }
  
  .banner-content { flex-flow: column nowrap; align-items: center; width: 100%; min-width: 300px; }
  
  .title-naam { width: 180px; top: 0; align-self: center; }
  
  .title-img { align-self: center; width: 50%; height: 250px; left: 0; top: 0; }
  
  .title-banner { width: 100%; visibility: collapse; }
  
  .enter { margin-top: 30px; }
}


/*--550--*/
@media screen and (min-width: 321px) and (max-width: 550px) {
  
  section { align-items: center; } /*--voor driehoek en icon-big--*/
  .row-wrapper { padding: 30px 20px; }
  
 /* .centerline:after { left: 20px; } /*--left: calc((100% - 1px) / 12);--*/
  
/* section  {align-items: flex-start; }*/
  .driehoek { margin-left: 6px; }
  .icon-big { margin-left: 6px; }
  
  h1 { font-size: 1.4em; }
  
  .row-even .skills-even, .row-even .skills-odd { width: 100%; min-width: 200px; align-items: center; }
  
  .row-even, .row-odd  { flex-flow: column wrap; width: 100%; min-width: 200px; margin-left: 0px; }
  .row-graduate        { flex-flow: column-reverse wrap; width: 100%; }
  
  .graduate-even, .graduate-odd, .graduate-center { 
    margin-left: 0;
    margin-right: 0;
  }

  .graduate-even:nth-of-type(n) .arrow-left {
    background-image: url(img/svg/arrow-left-orange.svg);
    margin: 0 0 15px -8px;
    padding: 0;
    order: 1;
  }
  
  .graduate-even .graduate-txt { order: 2;}
    
  .row-even .work-employer, .row-odd .work-employer { 
    justify-content: flex-end;
    align-content: flex-end;
    width: 100%; 
    min-width: 200px; 
    margin-left: -1px; 
    border-radius: 0px 5px 5px 0px;
    border-right: 1px solid rgba(51, 51, 51);
    border-left: 1px solid #141414;
  }
  
  .row-even .work-year  { width: 100%; min-width: 200px; justify-content: flex-start; margin-left: -7px; }
  .row-odd .work-year   { width: 100%; min-width: 200px; }
    
  .row-even .work-year, .row-odd .work-year {
    padding: 0;
    margin: 0 0 -10px 0;
    z-index: 3;
  }
    
  .row-even .work-employer .employer,
  .row-odd .work-employer .employer  { text-align: right; padding: 10px 10px 10px 0px; }
 
  .row-even .work-year .arrow { order: 1; }
  .row-even .work-year h2     { order: 2; }
  
  .row-even .about-profile { width: 100%; }
  
  .row-even .about-number, .row-odd .about-number       { min-width: 200px; justify-content: flex-start; }
  .row-even .about-number h2, .row-odd .about-number h2 { padding: 5px 10px 5px 30px; margin: 0 0 0 -20px; }
  
  .row-even .about-txt, .row-odd .about-txt { width: 100%; min-width: 200px; padding: 10px 0; text-align: left; }
  
    
  .row-even:nth-of-type(n) .arrow  { 
    background-image: url(img/svg/arrow-down-yellow.svg);
    margin: 5px 8px 0 0;
  }
  
  .row-odd:nth-of-type(n) .arrow  { 
    background-image: url(img/svg/arrow-down-yellow.svg);
    margin: 5px 5px 0 0px;
  }
  
  .banner {align-content: center;  width: 100%; min-width: 300px; }
  
  .banner-content { flex-flow: row wrap; align-items: start; width: 100%; min-width: 300px; }
  
  .title-naam { width: 180px; top: 15px; align-self: start; top: 0px; margin-top: 0; }
  
  .title-img { align-self: center; height: 265px; left: 20px; top: 0; }
  
  .title-banner { width: 100%; top: 20px;}
  
  
  
}