@charset "UTF-8";

/*!
 * Bootstrap  v5.3.2 (https://getbootstrap.com/)
 * Copyright 2011-2023 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */


body {
    background: linear-gradient(
    to bottom,
    rgb(38, 91, 182),
    rgb(58, 128, 182),
    rgb(139, 203, 234) 100%
  );
   
    margin: 0;
  }

  
#cloud div::before,
#cloud div::after {
  content: "";
  display: block;
  position: fixed;
  z-index: -1000;
  bottom: 0;
  left: 0;

  width: 100vw;
  height: 100vh;

  background-image: url(../image/cloud_X.png);

  background-repeat: repeat-x;
  animation: cloud var(--duration) linear infinite forwards;

  --posX: right;
  --duration: 15s;
  --lowHeight: 20vh;
  --highHeight: 90vh;
  --layerNum: 4;
  --index: 0;
  --opacity: 0.5;
  --moveX: 300px;

  animation-delay: calc(
    (var(--duration) / var(--layerNum)) * var(--index) * -1
  );
  opacity: 0;
}
#cloud div::before {
  --index: 0;
}
#cloud div::after {
  --index: 2;
  transform: scale3d(-1, 1, 1); /*左右反転*/
}
#cloud div#cloud_layer2::before,
#cloud div#cloud_layer2::after {
  background-image: url(../image/cloud.png);
}
#cloud div#cloud_layer2::before {
  --index: 3;
}
#cloud div#cloud_layer2::after {
  --index: 1;
}


@keyframes cloud {
  0% {
    opacity: 0;
    background-position: var(--posX) var(--moveX) bottom
      calc(-1 * var(--lowHeight));
    background-size: calc(1 * var(--lowHeight)) var(--lowHeight);
  }
  5% {
    opacity: var(--opacity);
  }
  80% {
    opacity: var(--opacity);
  }
  100% {
    opacity: 0;
    background-position: var(--posX) bottom;
    background-size: calc(3 * var(--highHeight)) var(--highHeight);
  }
}


.cidade {
    width: 100%;
    height: auto;

}

.footer {
    
    width: 100%;
    background-image: url(../image/cidade.png);
    display: inline-table;
    unicode-bidi: isolate;
    position: relative;
    background-size: cover;

}

.top {
    background: repeating-linear-gradient(
        -55deg,
        #1a2644,
        #1a2644 3px,
        #ec681c00 3px,
        #ec681c00 6px
      );
    width: 100%;
    height:15em;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;
}

.logo {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto; 

    padding: 10px;
    margin: 10px;

    max-width: 40vw;
    text-align: center;
    filter: drop-shadow(0px 0px 20px  hsl(200deg, 80%, 55%));
}

.content {
    margin: auto;
    width: 50%;
    padding: 10px;
    align-content: center;
    width: 80%;
    text-align: center;
}

.bt {
    float: left;
    width: 33.33%;
}
.bt2 {
    width: 33.33%;
    float: left;
}

.icon {
    max-width: 75px;
    filter: drop-shadow(2px 2px 2px black);
}

.assinatura {
    margin-top: 30vh;

}

.n {
    margin-top: 5vh;
    max-width: 40vw;
    text-align: center;
}

.cnpj {
    text-align: center;
    padding-top: 200px;
    color: #1a2644;
    font-weight: 800;
    text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
    1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
    
}

.ao {
    text-align: center;
    display: block;
    align-items: center;
    margin-top: 0;
    line-height: 0.5;
    font-size: smaller;
    margin-bottom: 1vh;
}

h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    color: #1a2644;
    font-size: 3.5vh;
    line-height: 0;
}

.fina {
    font-weight: 400;
    font-size: 2.2vh;
    line-height: 0;
}

p {
    font-family: "Roboto Condensed", sans-serif;
    margin-bottom: 0;
}

h1 {
    font-family: "Roboto Condensed", sans-serif;
    color: white;
    font-size: 6vh;
    text-shadow: 2px 2px 2px black;
}

h1 span{
    background-color: #ec671c;
    padding-left: 2px;
    padding-right: 2px;
}

h4 {
    font-family: "Roboto Condensed", sans-serif;
    color: #1a2644;
    font-size: 3vh;
}

.svg {
    filter: drop-shadow(2px 2px 2px black);
    width: 24vh;
  }


  @media screen and (max-width: 900px) {
    body {
     
    }

    .bt {
        width: 100%;
    }

    .bt2 {
        width: 33.33%;
        float: left;
    }

    .svg {
        padding-top: 3vh;
    }

    .logo {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto; 
    
        padding: 10px;
        margin: 10px;
    
        max-width: 70vw;
        text-align: center;
    }

    .assinatura {
        padding-top: 50vh;
  
    }
    .n {
           
        max-width: 70vw;
        text-align: center;
    }

    .footer {
        height: 40vh;
        margin-bottom: 0;
        background-size: cover;
        background-position-x: center;
    
    }
    
  }