* {
  margin: 0;
  padding: 0;
}

body {

  font-family: 'Montserrat', sans-serif;
}

h1,h2 {

  font-size: 23px;

}
header {

  background-color: white;
  font-size: 15px;

}
#credits {

     font-size: 11px
}
 #intro {

  font-size: 21px;

}

.s-item {
  position: relative;
  margin: 11px;
  background-size: cover;
}

.s-item img {
  max-width: 100%;
  width: 100%;
}

.s-item .s-item-text-holder {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  height: 105px;
}

.s-item .s-item-text-holder.force-top {
  top: 0;
  bottom: inherit;
}

.s-item .s-item-text {
  font-size: 33px;
  width: 90%;
  color: white;
  position: absolute;
  text-decoration: none !important;
  top: 50% !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  -ms-transform: translate(-50%, -50%) !important;
  -webkit-transform: translate(-50%, -50%) !important;
  transform: translate(-50%, -50%) !important;
}

.s-item .s-item-text a {
  text-decoration: none !important;
  color: #d94a0f !important;
}

.img-responsive {
  max-width: 100%;
  width: 100%;
  height: auto;

}
.s-item .s-item-text{
  font-size: 33px;
  width: 90%;
  color: white !important;
  position: absolute;
  text-decoration: none !important;
   top: 50% !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  -ms-transform: translate(-50%,-50%) !important;
  -webkit-transform: translate(-50%,-50%) !important;
  transform: translate(-50%,-50%) !important;
}

.s-item .s-item-text a{
  text-decoration: none !important;
  color: white !important;
}

.img-responsive{
  max-width: 100%;
  width: 100%;
  height: auto;

}


.socials-holder{
  width: 400px;
  max-width: 100%;
}

@media (max-width: 590px) {
  .init-holder p{
    font-size: 12px;
  }
}

@media (max-width: 760px) {

  .main-logo{
    max-width: 150px !important;
  }

  .init-holder{
    top: 55% !important;
  }

}

.main-logo{
  max-width: 300px;
  height: auto;
}

.login-page
{
    background-image: url('cativantesfera-img/banner3.jpg');
    background-repeat: no-repeat;
    background-size:cover;
    background-position: center;
    color: black;
    overflow: auto;
    padding: 3em;
    position: relative;
    text-align: center;
    color: white;
    font-size: 23px;
    background-attachment: fixed;

}

.container {

  align-items: middle;
}

.container1 {

  align-items: middle;
}

a {
  color: white;
  text-decoration: none;
  color: inherit !important;
}


ul {
    width: 75%;
    margin: auto;
    font-size: 23px;
}

button {
  font-size: 20px;
  background-color: #8a9ec3;
  width: 400px;
  max-width: 100%;
  border-radius: 60px;

}

 .menu{
 list-style: none;
 width: 10em;
 background: ;
 margin-left: auto;
 margin-right: auto;
 }

 .menu li{
 position: relative;
 float: right;
 }

 .menu li a{
 background: orange;
 color:#fff;
 text-decoration:none;
 padding:14px 20px;
 display:block;
 }

 .menu li a:hover{
 background:darkred;
 color: #fff;
 text-shadow:0px 0px 5px red;
 }

 .menu li ul{
 position: absolute;
 top:45px;
 left:0;
 background-color: #f1f1f1;
 display:none;
 font-size: 15px;
 color: black;
 }

 .menu li:hover ul, .menu li.over ul{
 display:block;
 }

 .menu li ul li{
 border:1px solid #c0c0c0;
 display:block;
 width:100px;
 }

#contactos1 {

  font-size: 21px;


}


.row{
  margin: 0 !important;
  padding: 0 !important;
}

.faixa {
  margin: 14px;

}


    .container {

      align-items: middle;
    }

    .container1 {

      align-items: middle;
    }

     .menu{
     list-style: none;
     width: 10em;
     background: ;
     margin-left: auto;
     margin-right: auto;
     }

     .menu li{
     position: relative;
     float: right;
     }

     .menu li a{
     background: orange;
     color:#fff;
     text-decoration:none;
     padding:14px 20px;
     display:block;
     }

     .menu li a:hover{
     background:darkred;
     color: #fff;
     text-shadow:0px 0px 5px red;
     }

     .menu li ul{
     position: absolute;
     top:45px;
     left:0;
     background-color: #f1f1f1;
     display:none;
     font-size: 15px;
     color: black;
     }

     .menu li:hover ul, .menu li.over ul{
     display:block;
     }

     .menu li ul li{
     border:1px solid #c0c0c0;
     display:block;
     width:100px;
     }


    footer {

          width: 100%;
          background-color: #212121;
          color: white;
          font-size: 13px;
          margin: auto;
          padding: 0;

      }

    .faixasContainer{
      display: flex;
      flex-wrap:wrap;
    }

    .faixasContainer #faixa1,
    .faixasContainer #faixa2{
      width: 50%;
    }

    .lang-holder{
      position: absolute;
      top:40px;
      right: 40px;
      z-index: 999;
    }

    .lang-holder img{
      max-width: 30px;
    }

    .sintrabysofiais-holder{
      position: absolute;
      top: 30px;
      right: 30px;
      width: 540px;
      max-width: 95%;
      text-align: center;
    }

    .sintrabysofiais-holder .circle-holder{
      max-width: 16px;
    }


    @media (max-width: 900px) {

      .sintrabysofiais-holder{
        right: 0px;
        width: 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
      }

      .s-item .s-item-text{
        font-size: 26px;
      }

      .s-item .s-item-text-holder{
        height: 80px;
      }

    }

    .init-holder{
      position: absolute;
      top: 40%;
      bottom: auto !important;
      left: 50% !important;
      right: auto !important;
      -ms-transform: translate(-50%,-50%) !important;
      -webkit-transform: translate(-50%,-50%) !important;
      transform: translate(-50%,-50%) !important;
      width: 100%;
      color: #fff;
    }

    .banner-top-image{
      width: 100%;
      height: auto;
    }

    @font-face {
      font-family: 'Comic-Sans';
      font-style: normal;
      src: url('./fonts/ComicSansMS3.ttf');
    }

    .project-text-holder{
      font-family: "Comic-Sans";
    }

    .project-text-holder h4{
      font-size: 40px;
    }

    .project-text-holder p{
      font-size: 26px;
    }
    #autor {

     font-size: 11px;

   }