body {
      font-family: 'Roboto Slab', serif;
    }

    .container-fluid {
      padding: 0;
    }

    .starter {
      text-align: center;
      margin-top: 100px;
      /*position: relative;

  background-image:url(f3.jpg);
  background-position-x: center;
  background-position-y:top;
  background-size: cover;
  color:#fff;
  min-height: 400px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  z-index:-1;*/
    }

    /*.starter::before{ position: absolute; z-index:-1; top:0px; left:0px; width: 100%; height:100%; background-color:#fbcdbe; content:"";}
*/


    .img-responsive {
      margin: 15px 0;
    }

    a {
      color: #000;
      text-decoration: underline;
      text-decoration-color: #fff;
    }

    a:hover {
      color: #000;
      text-decoration-color: #dbbde5;
    }

    a:focus {
      outline: 0px;
    }

    .contacte p {
      color: #333;
    }

    .contacte a:hover {
      color: #333;
    }

    .contacte a:focus {
      outline: 0px;
    }

    h1 {
      font-family: 'Amatic SC';
      font-size: 90px;
      font-weight: bold;
      color: #fff;
    }

    h2 {
      font-family: 'Amatic SC';
      text-align: center;
      margin-bottom: 40px;
      font-weight: bold;
      font-size: 55px
    }

    h2 span {}

    h3 {
      font-size: 20px;
    }

    p {
      font-size: 16px;
      font-weight: 300;
      line-height: 25px;
    }

    p.intro {
      font-size: 18px;
      padding: 50px 80px;
      text-align: center;
    }

    .intro a {
      font-weight: 400;
      text-decoration-color: #000;
    }

    .centre {
      text-align: center;
    }

    .autor {
      font-weight: bold;
      font-style: normal;
      font-size: 25px;
    }

    .entradeta {
      font-weight: 100;
      font-style: normal;
      font-size: 25px;
      margin: 40px 20px;
    }

    .espectacle {
      text-align: center;
    }

    .bolos {
      text-align: center;
    }

    .bolos ul {
      padding: 0px
    }

    .bolos ul li {
      list-style: none;
    }

    .persona {
      text-align: center;
      margin-bottom: 20px;
    }

    .persona img {
      margin-bottom: 10px;
    }

    .persona img:hover {
      opacity: 0.5;
    }

    .nom {
      font-weight: bold;
      font-size: 16px;
    }

    .imgcara {
      position: relative;
      display: block;
    }

    .mesinfo {
      top: 180px;
      left: 49%;
      position: absolute;
      color: #fff;
      display: none;
    }

    .navbar {
      background-color: #000;
      color: #fff;
    }

    .navbar a {
      color: #fff;
      font-weight: normal;
      font-family: 'Amatic SC';
      font-size: 23px;
    }

    .icon-bar {
      background-color: #fff;
    }

    .nav li a {
      border-bottom: 4px solid #000;
      text-decoration: none;
    }

    .nav li a:focus {
      background-color: #000
    }

    .nav li a:hover {
      border-bottom: 4px solid #dbbde5;
      background-color: #000;
    }

    .navbar a.navbar-brand {
      color: #dbbde5;
      text-decoration: none;
      display: none;
    }

    .modul {}

    .contacte {
      background-color: #fbcdbe;
      color: #fff;
      margin-bottom: 0px;
      padding: 50px 0;
    }

    .modal-body {
      text-align: left;
      padding: 20px;
    }

    .obra1 {
      background-color: #dbbde5;
      padding: 100px 0;
    }

    .obra2 {
      background-color: #bfd8d2;
      padding: 100px 0;
    }

    .obra3 {
      background-color: #a6c7ea;
      padding: 100px 0;
    }

    .obra4 {
      background-color: #fff5ba;
      padding: 100px 0;
    }

    .companyia {
      padding: 50px 0 50px;
      background-color: #fbcdbe
    }

    .amagat{ opacity:0;}

    @media only screen and (max-width: 600px) {
      .obra1 {
        padding: 50px 0;
      }

      .obra2 {
        padding: 50px 0;
      }
    }