@import url("https://use.typekit.net/xsp2nek.css");

:root{
    --mouse-x: 2;
    --mouse-y: 3;
    --center-x: 50vw;
    --center-y: 50vh;
    --blur:10px;
}
body{
    margin: 0;
    background-color: #ebebeb;
}


.page-transition .div{
    position:fixed;
    background-color:#747474;
    height:100vh;
    width:100vw;
  }
  .page-transition .div:nth-child(1){
    left:0px;
  }



  .preload{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50% , -50%);
  }
  .preload li{
    display:inline-block;
    width:10px;
    height:10px;
    border:2px solid #fff;
    border-radius:50%;
  }


.navbar{
    height: 10%;
    color:black;
    opacity: 0;
    -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
    }

.navbar.visible{
  opacity:1;
  background: #ebebebba;
  -webkit-transform: none;
               -moz-transform: none;
                  -ms-transform: none;
                   -o-transform: none;
                          transform: none;
}


.navbar-brand{
      color:black;
    }

.nav-link{
      color:black;
    }

.navbar.scrolled {
        background-color: #ebebebba !important;
        transition: background-color 600ms linear;
      }


.navbar-toggler-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.755)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
      }

@media only screen and (max-width: 992px) {
  #Camada_1 {
    position: relative;
    fill:#ebebeb;
    width: 100%;
    height: auto;
    filter: drop-shadow(10px 10px 10px #a7a7a7);
  }
}

@media only screen and (min-width: 992px) {
  #Camada_1 {
    position: relative;
    fill:#ebebeb;
    width: 100%;
    height: auto;
    filter: drop-shadow( calc( ( 50vw - var(--mouse-x) ) / 100 ) calc(( 50vh - var(--mouse-y) ) / 80) var(--blur) #a7a7a7 );
    transition: filter 0.1s linear;
  }
}







h1{
    font-size: 2rem;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}



  h3{
      font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
    font-size: 20px;
    color: grey;
  }

  h2{
      font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
    font-size: 24px;
    line-height: 20px;
    letter-spacing: 0.01em;
  }


  #back{
    position: relative;
    fill: #f1f1f1;
    width: 100%;
    left:0;


  }

  #back2{
    position: relative;
    width: 100%;
    right:0;
  }


  .svg-container {
    position: absolute;
    left: 0;
    top:150vh;
    width: 34%;
    height: auto;
  }

  .svg-container2 {
    position: absolute;
    right: 0;
    width: 29%;
    height: auto;
  }

  .cenas{
      font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 21px;
  line-height: 32px;
  color: #000000;
  }

  @media only screen and (max-width: 992px) {
    .cenas{
        font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 32px;
    color: #000000;
    }
  }

  p{
      font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
      font-size: 18px;
    line-height: 32px;
    letter-spacing: 0.018px;
    color: grey;
  }


  .mb-10{
    margin-bottom: 5%;
  }

  .mb-15{
    margin-bottom: 15%;
  }

  .mb-25{
      margin-bottom: 35%;
  }
  @media only screen and (max-width: 992px) {
    .mb-25{
      margin-bottom: 15%;
  }
  }

  .mb-35{
  margin-bottom: 55%;
  }

  .mr-15{
      margin-right: 15%;
  }

  .mt-15{
    margin-top: 15%;
  }

  #img1{
    opacity: 0;
          -webkit-transform: translateY(70px);
               -moz-transform: translateY(70px);
                  -ms-transform: translateY(70px);
                   -o-transform: translateY(70px);
                          transform: translateY(70px);
          -webkit-transition: all 0.9s ease-out;
               -moz-transition: all 0.9s ease-out;
                  -ms-transition: all 0.9s ease-out;
                   -o-transition: all 0.9s ease-out;
                          transition: all 0.9s ease-out;
  }

  #img1.visible{
    opacity: 1;
          -webkit-transform: none;
               -moz-transform: none;
                  -ms-transform: none;
                   -o-transform: none;
                          transform: none;
  }


  #img2{
    opacity: 0;
          -webkit-transform: translateY(40px);
               -moz-transform: translateY(40px);
                  -ms-transform: translateY(40px);
                   -o-transform: translateY(40px);
                          transform: translateY(40px);
          -webkit-transition: all 1.5s ease-out;
               -moz-transition: all 1.5s ease-out;
                  -ms-transition: all 1.5s ease-out;
                   -o-transition: all 1.5s ease-out;
                          transition: all 1.5s ease-out;
  }

  #img2.visible{
    opacity: 1;
          -webkit-transform: none;
               -moz-transform: none;
                  -ms-transform: none;
                   -o-transform: none;
                          transform: none;
  }

  #img3{
    opacity: 0;
          -webkit-transform: translateY(80px);
               -moz-transform: translateY(80px);
                  -ms-transform: translateY(80px);
                   -o-transform: translateY(80px);
                          transform: translateY(80px);
          -webkit-transition: all 1.5s ease-out;
               -moz-transition: all 1.5s ease-out;
                  -ms-transition: all 1.5s ease-out;
                   -o-transition: all 1.5s ease-out;
                          transition: all 1.5s ease-out;
  }

  #img3.visible{
    opacity: 1;
          -webkit-transform: none;
               -moz-transform: none;
                  -ms-transform: none;
                   -o-transform: none;
                          transform: none;
  }

  #img4{
    opacity: 0;
          -webkit-transform: translateY(40px);
               -moz-transform: translateY(40px);
                  -ms-transform: translateY(40px);
                   -o-transform: translateY(40px);
                          transform: translateY(40px);
          -webkit-transition: all 2s ease-out;
               -moz-transition: all 2s ease-out;
                  -ms-transition: all 2s ease-out;
                   -o-transition: all 2s ease-out;
                          transition: all 2s ease-out;
  }

  #img4.visible{
    opacity: 1;
          -webkit-transform: none;
               -moz-transform: none;
                  -ms-transform: none;
                   -o-transform: none;
                          transform: none;
  }



  .bg-light2{
    background-color: #ebebeb;
  }

.titulo2{
  font-size: 2rem;
  color: black;
}

@media only screen and (max-width: 992px) {
  .titulo2{
    font-size: 1.5rem;
    color: black;
  }
}
.titulo3{
  font-size: 1.5rem;
}

.texto1{
  transform: translateX(-15%);
}



/*footer*/

ul {
  padding:0;
  margin:0
 }
 li {
  list-style:none
 }
 a:focus,a:hover {
  text-decoration:none;
  -webkit-transition:.3s ease;
  -o-transition:.3s ease;
  transition:.3s ease
 }
 a:focus {
  outline:0
 }
 .logo-footer {
  max-width:40%

 }
 p {
  font-size:16px;
  line-height:30px;
  color:#898b96;
  font-weight:300
 }
 h4 {
     font-family: "Roboto", sans-serif;
  margin:0;
  font-weight:400;
  padding:0;
  color:#363940
 }
 a {
  color:#5867dd
 }
a.link {
    color: #000000;
    font-weight: 600;
    border: 1px dashed black;
    padding: 6px 14px;
}
a.link:hover {
    color: #fff;
    background-color: #000000;
    font-weight: 600;
    border: 1px dashed #fff;
    padding: 6px 14px;
}
 .no-padding {
  padding:0!important
 }

 .footer-big {
  padding:105px 0 65px 0
 }

 @media only screen and (max-width: 992px) {
  .footer-big {
    padding:85px 0 0 0
   }
}

 .footer-big .footer-widget {
  margin-bottom:40px
 }
 .footer--light {
  background:#f1f1f1
 }
 .footer-big .footer-menu ul li a,.footer-big p,.footer-big ul li {
  color:#898b96
 }
 .footer-menu {
  padding-left:48px
 }
 .footer-menu ul li a {
  font-size:15px;
  line-height:32px;
  -webkit-transition:.3s;
  -o-transition:.3s;
  transition:.3s
 }
 .footer-menu ul li a:hover {
  color:black
 }
 .footer-menu--1 {
  width:100%
 }
 .footer-widget-title {
  line-height:42px;
  margin-bottom:10px;
  font-size:18px
 }
 .mini-footer {
  background:#f1f1f1;
  text-align:left;
  padding:32px 0
 }

 @media only screen and (max-width: 992px) {
  .mini-footer {
    background:#f1f1f1;
    text-align:left;
    padding:16px 0
   }
}

 .mini-footer p {
  margin:0;
  line-height:26px;
  font-size:15px;
  color:#999
 }

 .mini-footer p a {
  color:black
 }
 .mini-footer p a:hover {
  color:blue
 }
 .widget-about img {
  display:block;
  margin-bottom:30px
 }
 .widget-about p {
  font-weight:400
 }
 .widget-about .contact-details {
  margin:30px 0 0 0
 }
 .widget-about .contact-details li {
  margin-bottom:10px
 }
 .widget-about .contact-details li:last-child {
  margin-bottom:0
 }
 .widget-about .contact-details li span {
  padding-right:12px
 }
 .widget-about .contact-details li a {
  color:black
 }
 @media (max-width:991px) {
  .footer-menu {
   padding-left:0
  }
 }
.section-lines {
    background-position: center center;
    background-repeat: repeat;
}

.transition-background {
    transition: background-color 1s ease
}
.project-block:hover {
    cursor: pointer;
}