@media screen and (max-width: 841px) {
  h2.header,
  h1.header { margin-top: 47px; }
}

@media screen and (max-width: 767px) {
  #about h2 span { display: initial; }
  #about .col-md-8.photo { margin-top: 50px; padding-left: 15px; }
  #about .col-md-8.photo img { display: block; width: 100%; max-width: 350px; margin: 0 auto; }
  #about .photo div { max-width: 350px; margin: -45px auto 0; }
  #contact .col-md-4 { padding-top: 20px; }
}

@media screen and (max-width: 767px) {
  #about-info span {
    height: 96px;
    line-height: 100%;
    padding-top: 30px;
  }
}
@media screen and (max-width: 737px) {
  #header.short #logo { margin-left: 10px; }
}

@media screen and (max-width: 679px) {
  #header #logo { margin-left: 10px; }

  h1.header,
  h2.header { padding: 10px; }
  h2 { font: 900 30px "Roboto",sans-serif; }
}

@media screen and (max-width: 590px) {
  #header { height: 418px; }
  #header.short { height: 415px; }
  
  h1.header,
  h2.header {
    width: 100%;
    padding: 10px;
    font-size: 20px;
  }

  h1.header span:nth-child(1),
  h2.header span:nth-child(1) { font-size: 20px; }
  
  #header .navbar li a { font-size: 15px; }
  #header .navbar li a { padding-top: 39px; }
  
  #contact { padding: 0 20px; }
  #contact h2 { background: none; }
}
@media screen and (max-width: 475px) {
  #cursuri { padding: 75px 25px; }
  #cursuri span { display: block; }
  #about { padding: 70px 20px 50px }
  #contact .col-md-8 { padding: 55px 20px 20px 20px; }
}

@media screen and (max-width: 425px) {
  #header .navbar li { width: 33%; }
  #header .navbar li:nth-child(1) a { padding-top: 30px; }
  #cursuri .class-intro { margin-bottom: 10px; }
}
@media screen and (max-width: 413px) {
  #cursuri { font-size: 12px; }
  #header .navbar li:nth-child(3) a { padding-top: 30px; }
}