@import url('https://fonts.googleapis.com/css?family=Niconne&display=swap');
@import url('https://fonts.googleapis.com/css?family=Teko:300,400&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
@import url('https://fonts.googleapis.com/css?family=Cabin|Herr+Von+Muellehoff|Source+Sans+Pro:400,900&display=swap');

:root{
    --main-font: 'Source Sans Pro', sans-serif;
    --body-font: 'Cabin', sans-serif;
}
html{
    scroll-behavior: smooth;
    font-family: var(--body-font);
}
.bo a{
    color: #fff;
}
.conteudo1{
    height: 90% !important;
    width: 70% !important;
}
.coere{
    background-attachment: fixed;
}
.topnav a{
    color: #fff !important;
}
.icon-bar a{
    color: #fff !important;
}
#trev a{
color: #000 !important;
text-decoration: none;

}
#trev a:hover::before{
    left: 100%;
}

small {
    font-size: 80%;
  }
  b,
strong {
  font-weight: bolder;
}
a:hover {
    color: #224abe;
    text-decoration: underline;
  }
  small,
  .small {
    font-size: 80%;
    font-weight: 400;
  }
  .btn-circle {
    border-radius: 100%;
    height: 2.5rem;
    width: 2.5rem;
    font-size: 1rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  
  .btn-circle.btn-sm, .btn-group-sm > .btn-circle.btn {
    height: 1.8rem;
    width: 1.8rem;
    font-size: 0.75rem;
  }
  
  .btn-circle.btn-lg, .btn-group-lg > .btn-circle.btn {
    height: 3.5rem;
    width: 3.5rem;
    font-size: 1.35rem;
  }
  
  .btn-icon-split {
    padding: 0;
    overflow: hidden;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  
  .btn-icon-split .icon {
    background: rgba(0, 0, 0, 0.15);
    display: inline-block;
    padding: 0.375rem 0.75rem;
  }
  
  .btn-icon-split .text {
    display: inline-block;
    padding: 0.375rem 0.75rem;
  }
  
  .btn-icon-split.btn-sm .icon, .btn-group-sm > .btn-icon-split.btn .icon {
    padding: 0.25rem 0.5rem;
  }
  
  .btn-icon-split.btn-sm .text, .btn-group-sm > .btn-icon-split.btn .text {
    padding: 0.25rem 0.5rem;
  }
  
  .btn-icon-split.btn-lg .icon, .btn-group-lg > .btn-icon-split.btn .icon {
    padding: 0.5rem 1rem;
  }
  
  .btn-icon-split.btn-lg .text, .btn-group-lg > .btn-icon-split.btn .text {
    padding: 0.5rem 1rem;
  }
  .icon-circle {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .text-xs {
    font-size: .7rem;
  }
  
  .text-lg {
    font-size: 1.2rem;
  }
  
  .text-gray-100 {
    color: #f8f9fc !important;
  }
  
  .text-gray-200 {
    color: #eaecf4 !important;
  }
  
  .text-gray-300 {
    color: #dddfeb !important;
  }
  
  .text-gray-400 {
    color: #d1d3e2 !important;
  }
  
  .text-gray-500 {
    color: #b7b9cc !important;
  }
  
  .text-gray-600 {
    color: #858796 !important;
  }
  
  .text-gray-700 {
    color: #6e707e !important;
  }
  
  .text-gray-800 {
    color: #5a5c69 !important;
  }
  
  .text-gray-900 {
    color: #3a3b45 !important;
  }        


#trev a:hover{
	
	color:blue !important;
}
p{
    margin: 0;
}
section{
    padding: 60px 0;
}
#fa{
    align-items: center;
}
.calen{
  text-align: center;
  align-items: center !important;
padding-left: 20% !important;
 width: 100%;

 
}
#separa{
  padding-top: 5%;
}
.fc h2{
    font-size: 17px !important;
}

.cald{
    width: 80%;
    border-radius: 7px;
    font-family: 'Times New Roman', Times, serif;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0 4px 7px rgba(0, 0, 0, .2);
    text-align: center;
    padding-left: -10px;
   
}


  
    #cal h4{
      background-color:#524D41;
      text-align: center;
      color: white;
    
    }





header{
    width: 100%;
    height: 100vh;
    background: 
    url("images/header-bg.jpg") center no-repeat;
    background-size: cover;
    position: relative;

}

.containe{
    width: 100%;
}
.facebook {
    background: #3B5998;
    color: white;
  }
  
  .twitter {
    background: #55ACEE;
    color: white;
  }
  
  .google {
    background: #007bb5;
    color: black;
  }
  


.parallax{
    height: 30vw;
    background-image: url("images/tanque.JPG");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    position: relative;
    color: white;
    display: flex;
    align-items: center;


}
.parallax2{
    height: 40vw;
    background-image: url("images/cec1.JPG");
    background-position: 50%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color: white;
    display: flex;
   align-items: center;


}
.parallax2 h2{
    color: #000;
    padding-bottom: 5vh;
}
.parallax2 p{
    color: #000;
    font-size: 1.3vw;
}
.btn1{
    float: left;
    background-color: transparent !important;
    
   
}
.btn2{
    float: right;
    background-color: transparent !important;
   
}


.funcio{
   font-size: 17px;
   text-align: center;
}

#casa{
	width:100%;
	height: 100%;
	align-items: center;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 100px;

}
.branco{
    border-radius: 6px;
    background-color: #fff;
    padding: 10px;
}
#x i{
  font-size: 15px;
}

#divida{
	
	border: 1px solid  black;
	border-radius: 15px;
	padding-left: 9px;
	padding-top: 7px;
	padding-bottom: 7px;
	padding: 20px;
    height: 100%;
    color: #000;
    background-color: white;
	
}
#divida h3{
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	font-family: 'Times New Roman', Times, serif;
	font-size: 25px;
}
#assunto h4{
text-align: center;
font-family: 'Times New Roman', Times, serif;
font-size: 20px;
}
#desfecho{
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
	text-align: center;
}
#desfecho p{
	font-family: 'Times New Roman', Times, serif;
	font-size: 20px;
}
#corpo{
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;

}
#corpo p{
font-family: 'Times New Roman', Times, serif;
font-size: 20px;
}



header >.container{
    position: relative;
    height: 100%;
    width: 100%;
    padding: 0;
}

.navbar-brand{
    position: absolute;
    width: 100%;
    max-width: 100px;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    transition:  opacity 650ms;

}

.navbar-brand:hover{
    opacity: .8;
}
.hamburger-menu{
    position: fixed;
    top: 25px;
    right: 15px;
    width: 50px;
    display: flex;
    background-color: #101D2C;
    border-radius: 4px;
    cursor: pointer;
    z-index: 999;
}
.hamburger-menu i{
    font-size: 30px;
    color: rgba(198,153,44,.7); 
    margin: auto;
}
.hamburger-menu .fa-times{
    display: none;
}
.hamburger-menu .fa-times.open{
    display: block;
}
.hamburger-menu .fa-bars.open{
    display: none;
}
.nav-list{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    list-style: none;
    background-color: #101D2C;
    z-index: 1250;
    display: flex; 
    flex-direction: column;
    justify-content: space-around;
    opacity: 0;
    transform: translateX(-100%);
    transition: transform .5s;
    width: 88%;
    height: 100%;
    padding: 4.4rem;
}
.nav-list.open{
    opacity: 1;
    transform: scale(1);
    transform: translateX(0);
}



.hero-text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.her-tex{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    text-align: center;
    width: 70%;
}

.hero-text h1{
    font-family: "Niconne", cursive;
    color: #c69963;

}


.hero{
    position: relative;
  
    
}
.hero1{
    position: relative;
  
    
}
.hero h2{
    font-family: "Niconne", cursive;
    color: #fff;
    font-size: 8em;
    position: absolute;
    transform: translate(-50%, 50%);
    top: 50%;
    left: 50%;
    
    
}
.hero h2:nth-child(1){
    color: transparent;
   -webkit-text-stroke: 2px #03a9f4;
}
.hero h2:nth-child(2){
    color: #03a9f4;
  animation: animate 4s ease-in-out infinite;
}

.hero1{
    position: relative;
    
}
.hero1 p{
    font-family: "Niconne", cursive;
    color: #fff;
    font-size: 60px;
    position: absolute;
   
   
    
    
}
.hero1 p:nth-child(1){
    color: transparent;
   -webkit-text-stroke: 2px #03a9f4;
}
.hero1 p:nth-child(2){
    color: #03a9f4;
  animation: animate 4s ease-in-out infinite;
}
#links{
    padding-left: 1.5rem;
}
#anuncio{
    padding-top: 6%;
    opacity: 0;
    animation: fadeUp .5s forwards;
    animation-delay: .5s;
}
#faturasc{
    height: 300px;
}

.datas{
    color: #03a9f4 !important;
    font-size: 13px !important;
}
.nav-link2 p{
 color: #000;
}
.conParallax
{
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: url(background.jpg);
	background-attachment: fixed;
}
.mixBlnd
{
	background-blend-mode: screen;
}
@keyframes animate{
    0%,100%{
        clip-path: polygon(0% 45%, 15% 44%, 32% 50%,
         54% 60%, 70% 61%, 84% 59%, 100% 52%,
         100% 100%, 0% 100%);
    
    }
    50%{
        clip-path: polygon(0% 60%, 16% 65%, 34% 66%,
         51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%,
         0% 100%);
    
    }
}
@keyframes fadeUp{
    0%{
       transform: translateY(4rem);
    
    }
    100%{
       opacity: 1;
       transform: translateY(0);
    
    }
}
@keyframes fadeCEC {
    0%{
       transform: scale(2);
    
    }
    100%{
       opacity: 1;
       transform: scale(1);
    
    }
}
@keyframes grow {
    0%{
       widows: 0;
    
    }
    100%{
       opacity: 1;
       width: 100%;
    
    }
}
@keyframes fadeDown{
    0%{
       transform: translateY(-1rem);
    
    }
    100%{
       opacity: 1;
       transform: translateY(0);
    
    }
}
@keyframes spin {
    0%{
      transform: rotate(0);
    
    }
    100%{
       opacity: 1;
      transform: rotate(-360deg);
    
    }
}
@keyframes up{
    0%{
      opacity: 0;
    
    }
    50%{
        opacity: 1;
    }
    100%{
       opacity: 0;
       transform: translateY(-1rem);
    
    }
}
.an{
  
    line-height: .4;
    letter-spacing: 2px;
}
#anima{
    opacity: 0;
    animation: fadeUp .5s forwards;
    animation-delay: .5s;
    font-size: 7rem;
}
#cima{
    opacity: 0;
    animation: fadeUp .5s forwards;
    animation-delay: .5s;
}


#animaS{
    opacity: 0;
    animation: fadeDown .5s forwards;
    animation-delay: 1.5s;
}

.bota{
    line-height: -4px;
    font-size: 3rem;
    opacity: 0;
    animation: fadeCEC .5s forwards;
    
}
.home1{
    opacity: 0;
    animation: fadeCEC .5s forwards;
}
#home1{
    opacity: 0;
    animation: fadeCEC .5s forwards;
}
.separator{
   display: flex;
   align-items: center;
   justify-content: center;
}
.line{
    width: 100%;
    max-width: 8.4rem;
    height: .25rem;
    background-color:#fff;
    position: relative;
    opacity: 0;
    animation: grow 2s forwards;
    animation-delay: .9s;
    
}
.line-right::before,
.line-left::before{
    content: '';
    position: absolute;
    border: .6rem solid transparent;
    transform: translateY(-50%);
    top: 50%;
    opacity: 0;
    animation: grow .5s forwards;
    animation-delay: 1.2s;
}
.line-right::before{
    border-right-color: #fff;
    right:0; 

}
.line-left::before{
    border-left-color: #fff;
    left: 0; 
}
.asterisk{
    font-size: 1.2rem;
    margin: 0 1.6rem;
    color: #c69963;
    opacity: 0; 
    animation: spin 10s  infinite linear;
    transform-origin: center;
    transform-box: fill-box;

}
#giro{
    opacity: 0;
    animation: spin .5s forwards;
    animation-delay: .7s;  
}
#body{
    overflow: hidden;
}
.headline-description{
    color: #fff;
    font-size: 1.4rem;
    font-weight: 100;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    letter-spacing: 3px;
    margin-right: -3px;
}

.scrollspysite{
    position: relative;
    overflow: auto;
    height: 380px;
    padding: 0px;
   
   
}
.sps{
    position: relative;
    overflow: auto;
    height: 485px;
    padding: 20px;
}
#pagr a{
       position: absolute;
       top: 15%;
       left: 90%;
       transform: translate(-50%,-50%); 
       color: #1779ff;
       background-color: #fff;
       font-size: 15px;
       letter-spacing: 2px;
       text-transform: uppercase;
       text-decoration: none;
       box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
       padding: 10px 20px;
       overflow: hidden;
}
#pagr a:before{
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    bottom:2px;
    width: 50%;
    background: rgba(255, 255, 255, 0.05);
}
#pagr a:hover{
    color: #fff !important;
    background-color: #0c002b;
}
#pagr span:nth-child(1){
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to bottom, #0c002b, #1779ff);
    animation: animate1 2s linear infinite; 

}
@keyframes animate1{
    0%{
        transform: translateX(-100%);
    }
    100%{
        transform: rotateX(100%);

    }
}
#pagr span:nth-child(2){
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to right, #0c002b, #1779ff);
    animation:animate2 2s linear infinite;
    animation-delay: 1s;
}
@keyframes animate2{
    0%{
        transform: translateY(-100%);
    }
    100%{
        transform: rotateY(100%);

    }
}

#pagr span:nth-child(3){
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to left, #0c002b, #1779ff);
    animation:animate3 2s linear infinite;

}
@keyframes animate3{
    0%{
        transform: translateX(100%);
    }
    100%{
        transform: rotateX(-100%);

    }
}
#pagr span:nth-child(4){
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to top, #0c002b, #1779ff);
    animation:animate4 2s linear infinite;
    animation-delay: 1s;


}
@keyframes animate4{
    0%{
        transform: translateY(100%);
    }
    100%{
        transform: rotateY(-100%);

    }
}
.paragrafo{
    font-size: 17px;
}
#rolagem{
    background-color: #fff;
    border-radius: 10px;
}
.certa{
    color: #007bb5 !important;
}

.btn{
    width: 100px;
    padding: 5px 0!important;
    border: 1px solid #c69963;
    position: relative;
    overflow: hidden;

}
.back-to{
    width: 5rem;
    height: 5rem;
    background-color:  #101D2C;
    position: relative;
    top:-6rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    

}
.back-to i{
    display: block;
    color: #fff;
    font-size: 2rem;
    padding: 1rem;
    animation: up 2s infinite;
}
#texto{
    animation: up 2s infinite;
}
.di{
color: #000 !important;
}
#subir{
    
   margin-top: 100px !important;
}
.pic{
height: 70% !important;
}
#pic{
    height: 70% !important;
    }
.btn::before{
    content: "";  
    position: absolute;
    top: 0;
    left: -100%;
    height: 100%;
    width: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .3), transparent);
    transition: all 650ms;
    
}
.btn:hover::before{
    left: 100%;
}
.sectio-heading h4{
    text-transform: uppercase;
    color: #101D2C;
    line-height: 0;
    font-family: 'Teko', sans-serif;
    font-weight: 300;
    letter-spacing: 1px;
}
.sectio-heading h1{
    font-family: 'Niconne', cursive;
    color: #c69963;
}
.about .btn{
    width: 150px;
    color: #c69963 !important;
    transition: background-color 650ms;

}

.about .btn:hover{
    color: #fff !important;
    background-color: #c69963;
}

#casax{
	margin-bottom:15px;
	align-items: center;
	padding-left: 5px;
	padding-right: 5px;
    padding-top: 5px;
    height: 100%;
    width: 100%;
    justify-content: center;

}
#casax h4{
	background-color:#524D41;
	text-align: center;
	color: white;
	font-family: 'Times New Roman', Times, serif;
}
#dividii{
	
	border: 1px solid rgb(190, 184, 184);
	
	padding-top: 3px;
	padding-bottom: 3px;
	padding: 1px;
	height: 100%;
	flex-direction: column;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	
	box-shadow: 0 4px 7px rgba(0, 0, 0, .2);
	
}
#dividii p{
    color: #000;
}

#pagar p{
	color:blue;
}
#cal{
   
    width: 300px;
    border-radius: 7px;
    font-family: 'Times New Roman', Times, serif;
    border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
    height: 100%;
    box-shadow: 0 4px 7px rgba(0, 0, 0, .2);
    text-align: center;
}
#calx{
  align-items: center;
  padding-left: 125px;
}

  #cal h4{
    background-color:#524D41;
    text-align: center;
    color: white;
  
  }
  #txt p{
	font-size: 20px;
	font-family: 'Times New Roman', Times, serif;
}
#txt{
	padding: 9px;
	border: 2px solid black;
}
#casa1{
	width:100%;
	padding-right: 10px;
	padding-left: 10px;

}
#cas1{
	background-color: #fff;
	padding: 5px;
}
#brown{
    background-color: white;
  }
.menu{
    background-color: #101D2C;
}

.shop-info i{
    color: #c69963 ;
    font-size: 90px;
}
.shop-info h1{
    font-family: 'Teko', sans-serif;
    font-size: 25px;
    font-weight: 300;
    text-transform: uppercase;
}

.shop-info p,
.shop-info address{
    color: rgba(255, 255, 255, .5);
}

hr{
    border-top: 1px solid rgba(255, 255, 255, .5);
}
#fotop{
    font-size: 50% !important;
    width: 40%;
}
::-webkit-scrollbar{
    width: 0;
  }
  ::-webkit-scrollbar-button{
    width: 0;
  }
  .content1 ::-webkit-scrollbar{
      width: 20px !important;
  }
  #scrollPath{
    position: fixed;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
  }
  #progressbar{
    position: fixed;
    top: 0;
    right: 0;
    width: 10px;
    background: linear-gradient(to top, #008aff,#00ffe7);
    animation: animate20 5s linear infinite;
  
  }
  @keyframes animate20{
    0%,100%{
        filter: hue-rotate(0deg);
    }
    50%{
        filter: hue-rotate(360deg);
    }
  }
  #progressbar:before{
    content: '';
    position: relative;
    width: 10px;
    height: 100%;
    background: linear-gradient(to top, #008aff,#00ffe7);
    filter: blur(30px);
  }
  #progressbar:after{
    content: '';
    position: relative;
    width: 10px;
    height: 100%;
    background: linear-gradient(to top, #008aff,#00ffe7);
    filter: blur(30px);
  }
#contac ul{
    display: flex;
    position: absolute;
}
#contac ul li{
   list-style: none;
   margin: 0 20px;
}
#contac ul li a .fa{
    font-size: 40px;
    color: #262626;
    line-height: 80px;
    transform: -5s;
}
#contac ul li a{
    position: relative;
    display: block;
    width: 80px;
    height: 80px;
    text-align: center;
    background: #ccc;
    transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
    transition: .5s;
    box-shadow: -20px 20px 10px rgba(0, 0, 0, .5);
}
#contac ul li a:before{
    content: '';
    position: absolute;
    top: 10px;
    left: -20px;
    height: 100%;
    width: 20px;
    background: #b1b1b1;
    transition: .5s;
    transform: rotate(0deg) skewY(-45deg);
}
#contac ul li a:after{
    content: '';
    position: absolute;
    bottom: -20px;
    left: -10px;
    height: 20px;
    width: 100%;
    background: #b1b1b1;
    transition: .5s;
    transform: rotate(0deg) skewX(-45deg);
}
#contac ul li a:hover{
    transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px,-20px);
    box-shadow: -50px 50px 50px rgba(0, 0, 0, .5);
}
#contac ul li:hover .fa{
    color: #fff;
}

#contac ul li:hover:nth-child(1) a{
    background: #008aff;
}
#contac ul li:hover:nth-child(1) a:before{
    background: #4a69ad;
}

#contac ul li:hover:nth-child(1) a:after{
    background: #4a69ad;
}

#terceiro ul{
    position: absolute;
    margin: 0;
    padding-top: 10%;
    display: flex;
    
}

#terceiro ul li{
   list-style: none;
   margin: 0 20px;
    
}

#terceiro ul li img{
    transition: -5s;
 }
 #terceiro ul li img{
    position: relative;
    display: block;
    text-align: center;
    transition: .5s;
    transform: translate(0,0);
    box-shadow: -20px 20px 10px rgba(0, 0, 0, .5);
    
 }
 #terceiro ul li img:before{
     content: '';
     position: absolute;
     top: 10px;
     left: 20px;
     height: 100%;
     background: #b1b1b1;
     transition: .5s;
 }
 #terceiro ul li img:after{
    content: '';
    position: absolute;
   bottom: -40px;
    left: -10px;
    width: 100%;
    background: #b1b1b1;
    transition: .5s;
    transform: rotate(0deg) skewX(-45deg);
}
 #terceiro ul li img:hover{
   
  box-shadow: -50px 50px 50px rgba(0, 0, 0, .5);
}
#textot{
    color: #fff;
    text-align: left;
    padding-top: 10% !important;
    padding-left: 10%;
    width: 50%;
    
}
#textot h1{
    color: #fff !important;
    padding-bottom: 10px;
   
}
#textot  p{
    color: #fff !important;
    padding-bottom: 10px;
    
}
#textot a{
   position: relative;
   display: inline-block;
   text-transform: uppercase;
   font-weight: 700;
   color: #fff;
   letter-spacing: 1px;
   font-size: 10px;
   text-decoration: none;
   padding: 10px;
   
}
#textot a:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 100%;
    background: #c69963 ;
    z-index: -1;
    transition: 0.5s ease-in-out;
   
}
#textot a:hover:before{
width: 100%;
}
#terceiro{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    width: 50%;
   
}

#terceiro .box{
    position: relative;
    width: 250px;
    height: 170px;
    margin: 20px 0;
    transform-style: preserve-3d;
   
}

#terceiro .box:hover{
   box-shadow: 0 50px 80px rgba(0, 0, 0, .2)
   
}


#terceiro .box .imgBx{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#terceiro .box .contentBx{
    position: absolute;
    top: 50%;
    left: 10px;
    right: 10px;
    background: #fff;
    transform: translateZ(20px) scaleY(0);
  padding: 20px 10px;
  transform-origin: top;
  transition: 0.5s;
   
}
#terceiro .box:hover .contentBx {
   transform: translateZ(70px) scaleY(1);

}
#terceiro .box .contentBx p{
    color: #000 !important;
    font-size: .8rem;

}
#terceiro .box .contentBx h4{
    color: #000 !important;
    font-size: 1rem;
}
.fat .cartao{
    position: relative;
}
.fat .cartao .face{
   width: 300px;
   height: 200px;
   transition: 0.5s;
}
 .fat .cartao .face.face1{
   position: relative;
   display: flex;
   background-color: #fff;
   justify-content: center;
   align-items: center;
   z-index: 1;
   transform: translateY(100px);
 }
 .fat .cartao:hover .face.face1{
    background: #fff;
    transform: translateY(0);
 }
 .fat .cartao .face.face2{
    position: relative;
    display: flex;
    justify-content: center;
   color: #fff;
    background: rgba(16,29,44,.95);
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .8);
    transform: translateY(-100px);

  }
.fat .cartao:hover .face.face2{
    transform: translateY(0);
 }
  .fat .cartao .face.face2 .contentendo p{
    margin: 0;
    padding: 0;
  }
   .fat .cartao .face.face2 .contentendo a.secon{
    margin: 15px 0 0;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    font-size: 10px;
    text-decoration: none;
    padding: 10px;

  }
  .fat .cartao .face.face2 .contentendo a.fir{
   
    position: relative;
    display: inline-block;
    color: #fff;
    text-decoration: none;
    padding-bottom: 10px;
    padding-top: 10px;

  }
  .fat .cartao .face.face2 .contentendo a.secon:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 100%;
    background: #c69963 ;
    z-index: -1;
    transition: 0.5s ease-in-out;
  }
  .fat .cartao .face.face2 .contentendo a.secon:hover:before{
      width: 100%;
  }

  .fat .cartao .face.face1 .contentendo {
    opacity: 0.2;
    transition: 0.5s;

  }
  .fat .cartao:hover .face.face1 .contentendo {
    opacity: 1;
    
  }
  .fat .cartao .face.face1 .contentendo img{
    max-width: 100px;
}
 .fat .cartao .face.face1 .contentendo h4{
   margin: 10px 0 0;
   padding: 0;
   text-align: center; 
   font-size: 1.5rem;
}

.relogio img{
    max-width: 100px;
}
.pega{
    width: 30%;
}

.relogio{
  
    justify-content: center;
    align-items: center;
    text-align: center;
 
}

.relogio .box1{
    position: relative;
    transform-style: preserve-3d;
}
.container1{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
   
    

}
.container1 .card1{
    position: relative;
    height: 330px;
    background: #fff;
    width: 80%;
    display: flex;
    margin: 30px 0;
        

}
.container1::-webkit-scrollbar{
    width: 2px !important;
  }
.container1 .card1 .imgBx1{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 0.5s ease-in-out;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .8);
}
.container1 .card1:hover .imgBx1{
    width: 100px;
    height: 100px;
    left: -75px;
    top: calc(50% - 75px);
    transition: 0.5s ease-in-out;
    background:rgba(16,29,44,.95);
}
.container1 .card1 .imgBx1:before{
   content: attr(data-text);
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   text-align: center;
   font-size: 5rem;
   color: rgba(15, 1, 1, 0.05);
   font-weight: 700;
}
.container1 .card1 .imgBx1 img{
    max-width: 100px;
    transition: 0.5s ease-in-out;
}

.container1 .card1:hover .imgBx1 img{
    max-width: 75px;
    transition: 0.5s ease-in-out;
}
.container1 .card1 .content1{
    position: absolute;
    right: 0;
    width: calc(100% - 75px);
    height: 100%;
    align-items: center;
    text-align: center;

}


.row.descricao{
    justify-content: space-between;
    display: flex;
}
.seta{
padding-top: 30%;
}
/* saber ....*/
#primeiro p{
    text-align: center;
    float: center;
}
.historial {
 text-align: center;
 align-items: center;

}
#cec{
    font-size: 20px !important;
}
.his1 p{
    
   font-size: 17px;
}
.func1{
    width: 25%;
    text-align: left;
}
.func11{
    width: 50%;
}

.func3{
    width: 50%;
}
.func3 h4{
    margin-top: -20px !important;
}
.func3 h3{
    font-size: 2.5rem !important;
    margin-bottom: -10px !important;
}
.func12{
    width: 60% !important;
    text-align: justify;
}
.func4{
    width: 50%;
}
#func00 img{
    max-width: 100px;
    animation: spin .5s forwards;
    animation-delay: .7s; 
}
#func00{
    margin-bottom: 50px !important;
}
.linha{
   
    width: 100% !important;
}
.para1{
padding-left: 20%;
    width: 50%;
}
.paral2{
    font-size: 2rem !important;
}
.paral{
    font-size: 4rem;
    margin-top: -30px !important;
}
.para2{
    width: 50%;
}
.contat{
    text-align: justify !important;
}
.contat1{
    font-size: 2rem;
}
.contat2{
    text-transform: uppercase;
    letter-spacing: 2px;
}
#contac{
    margin-top: 20px;
    margin-bottom: 20px;
}

/*svgs treatments*/
.imagems svg{
    margin-top: 10%;
    max-width: 500px !important;
}
.home1{
    height: 75vh !important;
}
#Moeda{
    animation: moeda 2s  infinite linear;
    transform-origin: center;
    transform-box: fill-box;
}
#circulo{
    animation: moeda 5s  infinite linear;
    transform-origin: center;
    transform-box: fill-box;
}
@keyframes moeda{
    from{
        transform: rotateZ(0deg);
    }
    to{
        transform: rotateZ(360deg);
    }
}

#Homem{
    animation: homem 2s ease-in-out infinite alternate;
    transform-origin: bottom;
}
#Pessoa{
    animation: homem 2s ease-in-out infinite alternate;
    transform-origin: bottom;
}
#aviao{
    animation: homem 2s ease-in-out infinite alternate;
    transform-origin: bottom;
}
#Telefone ,#bolagrande, #bolacastanha{
    animation: homem 5s ease-in-out infinite alternate;
    transform-origin: bottom;
}
#menino, #menina, #papel, #fatura{
    animation: homem 2s ease-in-out infinite alternate;
    transform-origin: bottom;
}
#tablet{
    animation: homem 5s ease-in-out infinite alternate;
    transform-origin: bottom;
}

@keyframes homem{
    from{
        transform: rotateX(0deg);
    }
    to{
        transform: rotateX(20deg);
    }
}
#credito{
    animation: homem 2s ease-in-out infinite alternate;
    transform-origin: bottom;
}

@keyframes homem{
    from{
        transform: rotateX(0deg);
    }
    to{
        transform: rotateX(20deg);
    }
}
#segundo{
    width: 50%;

}
#segundo p{
   padding-top: 17%;
   text-align: right;

}
.canto{
height: 300px !important;
}
#segundo1{
    width: 50% ;
    padding-left: 10px;
    padding-top: 5%;
}
.coluna1, .coluna2{
    margin: 1px;
    padding: 1px;

    width: 200px;
}

/*cursor*/
.cursor{
    width: 3rem;
    height: 3rem;
    border: 2px solid #c69963;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: all 0.3s ease;
    transition-property: background, transform;
    transform-origin: 100% 100%;
    z-index: 99;
}
.link-grow{
    transform: scale(2.5);
}
.graf{
    align-items: center;
}
#chart_div{
    height: 600px;
}
@media (min-width: 176px) {
    .navbar-brand{
        max-width: 100px;
    }
    .hamburger-menu{
        top: 35px;
        right: 25px;
    }
    #pic{
        margin-top: 10%;
    }
    #calx{
        align-items: center;
        padding-left: 100px;
      }
      .car{
       margin-top: -30px;
      }
      .carousel-item{
        height: 75vh;
        position: relative;
      }
      #f_logins{
	
        position: relative;
        top: 50%;
       align-items: center;
        transform: translate(77%,-50%) !important;
        padding:50px 2px !important;
        border-radius: 5px;
        box-shadow: 4px 4px 4px rgba(0, 0, 0, .2);
        background: white;
        
    }
    #pic{
        margin-top: 0%;
    }
  #an h1{
      font-size: 2.5rem;
  }
.bota{
    font-size: 1.3rem;
}
.asterisk{
    font-size: .5rem;
}
 .line{
     max-width: 10%;
     height: .15rem;

 } 

.siste{
    font-size: .5rem;
}  
.bo .btn{
    width: 20%;
    font-size: 12px;
}
.caixa{
    width: 90%;
   
}
.home1 h2{
    font-size: 2rem;
  
}


}
/*Small (sm) devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    .navbar-brand{
        max-width: 100px;
    }
    .hamburger-menu{
        top: 35px;
        right: 25px;
        z-index: 101;
    }
    #pic{
        margin-top: 10%;
    }
    #calx{
        align-items: center;
        padding-left: 100px;
      }
      .car{
       padding-top: 30px;
      }
      .carousel-item{
        height: 75vh;
        position: relative;
      }
      #f_logins{
	
        position: relative;
        top: 50%;
       align-items: center;
        transform: translate(77%,-50%) !important;
        padding:50px 2px !important;
        border-radius: 5px;
        box-shadow: 4px 4px 4px rgba(0, 0, 0, .2);
        background: white;
        
    }
    #pic{
        margin-top: 0%;
    }
  #an h1{
      font-size: 2.5rem;
  }
.bota{
    font-size: 1.3rem;
}
.asterisk{
    font-size: .5rem;
}
 .line{
     max-width: 10%;
     height: .15rem;
 } 

.siste{
    font-size: .5rem;
}  
.bo .btn{
    width: 15%;
    font-size: 12px;
}
.caixa{
    width: 90%;
}
.home1 h2{
    font-size: 2rem;
  
}
}
@media (max-width: 576px) {
    .hamburger-menu{
        top: 35px;
        right: 25px;
        z-index: 101;
    }
    .row{
        flex-direction: column;
    }
    #bloco1{
        padding-top: 20% !important;
    }
    .row.descricao{
        flex-direction: row !important;
    }
    #terceiro{
        width: 100%;
        align-items: center;
        text-align: center;
        top: 30%;
    }
    .card1{
        width: 100% !important;
    }
    .content1{
        width: 100% !important;
    }
    #terceiro .imgBx img{
        max-width: 100%;
    }
    #terceiro .contentBx{
        max-width: 100%;
    }
    .cald{
        width: 100% !important;
    }
    
    
    #textot{
        text-align: center;
        width: 100%;
        padding: 0 !important;
    }
    #textot h1{
        font-size: 2rem;
    }
    #textot p{
        font-size: 14px;
    }
    #bloco3{
        padding-top: 30% !important;
    }
    #bloco3 h1{
        font-size: 2rem;
    }
    #bloco3 p{
        font-size: 14px;
    }
    .pic{
       
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .pic img{
        max-width: 200px;
      
    }
    #bloco5{
        width: 100% !important;
        padding-bottom: 10%;
    }
    #bloco5 h1{
        font-size: 2rem;
        padding-bottom: 5px;
        text-align: center;
    }
    #primeiro h1{
        font-size: 2rem;
    }
    #fat1{
        text-align: center !important;
        align-items: center !important;
        padding: 0 !important;
        float: left;
    }
    .cartao .face{
        width: 100% !important;
    }
    #anuncio{
        flex-direction: row !important;
        width: 95%;
        padding-top: 40% !important;
        height: 80% !important;
    }
    #rolagem{
        width: 100% !important;
        padding: 5px;
        margin: 0;
        height: 90%;
    }
    #rolagem1{
        width: 100% !important;
        padding: 2px;
        margin: 0;
        height: 90%;
    }
    #rolagem1 #navbar-example3{
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    #rolagem1 #navbar-example3 .nav.nav-pills{
        width: 100%;
       
    }
    #rolagem1 #navbar-example3 .nav.nav-pills a{
        width: 100%;
       
    }
    #rolagem1 #navbar-example3 .nav.nav-pills .nav-link{
        width: 100%;
       padding: 0;
     
       font-size: 12px;
    }
    .scrollspysite{
        height: 100% !important;
    }
    .sps{
        margin-top: 40%;
        width: 100%;
    }
   #dividx h2{
       font-size: 1rem !important;

   }
   #dividx p{
    font-size: 14px;

}
   #dividx #tod #esquero{
    width: 50%;

}

#dividx #tod #direro{
    width: 50%;

}
#deta{
    width: 100% !important;
}
.painel{
    width: 100% !important;
    padding: 0;
    margin: 0;
}
.painel table{
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px;
    width: 200px !important;
} 
.painel table thead{
    margin: 0 !important;
    padding: 0 !important;
    font-size: 5px;
    width: 200px !important;
}

#adicionais h3{
    font-size: 1.2rem;
}
#contas{
    flex-direction: column !important;
}
table{
    position: relative;
   width: 50%;
}
#pagr a{
       
       top: 15%;
       left: 80%;
}
.caixa{
    margin-top: 17% !important;
}
.sab{
    margin-top: 30%;
}

#segundo{
    width: 100%;
}
#segundo1{
    width: 100%;
}
#segundo p{
    float: center;
    text-align: center;
    
}
.coluna1, .coluna2{
    width: 160px;
}
#segundo1 .row{
    flex-direction: row !important;
}
.coluna1{
    float: left;
}
.coluna2{
    float: right;
}
.display-4{
    font-size: 2rem !important;
}
}
/*Medium (md) devices (tablets, 768px and up) 7058736*/
@media (max-width: 768px) {
    .navbar-brand{
        max-width: 150px;
    }
    .hamburger-menu{
        top: 35px;
        right: 25px;
    }
    #pic{
        margin-top: 10%;
    }
    #calx{
        align-items: center;
        padding-left: 100px;
      }
      .car{
       padding-top: 30px;
      }
      .carousel-item{
        height: 75vh;
        position: relative;
      }
      #f_logins{
	
        position: relative;
        top: 50%;
       align-items: center;
        transform: translate(77%,-50%) !important;
        padding:50px 2px !important;
        border-radius: 5px;
        box-shadow: 4px 4px 4px rgba(0, 0, 0, .2);
        background: white;
        
    }
    #pic{
        margin-top: 0%;
    }
  #an h1{
      font-size: 3rem;
  }
.bota{
    font-size: 1.5rem;
}
.asterisk{
    font-size: 1rem;
}
 .line{
     max-width: 5%;
     height: .15rem;
 } 
.siste{
    font-size: .7rem;
}  

.caixa{
    width: 100px;
    top: 50%;
}
.home1 h2{
    font-size: 3rem;
  
}

.sab{
    margin-top: 40%;
}
#primeir{
    margin-top: 5px !important;
    padding: 5px !important;
}
#primeir p{ 
   font-size: 14px;
}
.func1{
    width: 90%;
}
.func1 p{
    text-align: center !important;
}
.func11{
    width: 90% !important;
}
.row{
    text-align: center;
    align-items: center;
}
.func3{
    width: 90%;
}
.func12{
   width: 100% !important;
   align-items: center !important;
    text-align: center !important;  
}
.func12 p{
    text-align: center !important;
}
.paral2{
    font-size: 1.4rem !important;
}
.paral{
    font-size: 2rem !important;
}
.contac .row{
    margin: 0 !important;

}
.col-4{
    width: 90% !important;
}
 
 }

/*Medium (md) devices (tablets, 768px and up) 7058736*/
@media (min-width: 768px) {
    .navbar-brand{
        max-width: 150px;
    }
    .hamburger-menu{
        top: 35px;
        right: 25px;
    }
    #pic{
        margin-top: 10%;
    }
    #calx{
        align-items: center;
        padding-left: 100px;
      }
      .car{
       padding-top: 30px;
      }
      .carousel-item{
        height: 75vh;
        position: relative;
      }
      #f_logins{
	
        position: relative;
        top: 50%;
       align-items: center;
        transform: translate(77%,-50%) !important;
        padding:50px 2px !important;
        border-radius: 5px;
        box-shadow: 4px 4px 4px rgba(0, 0, 0, .2);
        background: white;
        
    }
    #pic{
        margin-top: 0%;
    }
  #an h1{
      font-size: 3rem;
  }
.bota{
    font-size: 1.5rem;
}
.asterisk{
    font-size: 1rem;
}
 .line{
     max-width: 5%;
     height: .15rem;
 } 
.siste{
    font-size: .7rem;
}  

.caixa{
    width: 100px;
    top: 50%;
}
.home1 h2{
    font-size: 3rem;
  
}

 
 }

/*Large (lg) devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
    header > .container{
        padding: 0 15px;

    }
    .hamburger-menu{
        display: none;
    }
    .navbar-brand{
        position: initial;
        transform: initial;
    }
    .nav-list{
        position: initial;
        width: initial;
        height: initial;
        background-color: initial;
        flex-direction: row;
        opacity: initial;
        transform: initial;
        transition: initial;
        margin: 0;
        padding: 0;
        
    }
    .nav-item{
        margin: 0 30px;
    }
    .nav-item:last-child{
        margin-right: 0;
    }
    .nav-link{
        position: relative;
        padding: 0;
        
    }
 
    .nav-link::before{
        content:"";
        position: absolute;
        left: 0;
        bottom: -3px;
        background-color: #c69963;
        width: 100%;
        height: 2px;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 650ms;
    }
    .nav-link:hover::before{
        transform: scaleX(1);
    }
    .nav-link1{
        background-color: #c69963;
        height: 2px;
       
    }
   
   
    #f_logins input[type=text], input[type=password]{
	
        width:300px; 
    }

   

    .bo .btn{
        width: 10%;
        font-size: 12px;
    }
    #an h1{
        font-size: 5rem;
    }
  .bota{
      font-size: 2rem;
  }
  .asterisk{
      font-size: 1.5rem;
  }
 
  .siste{
      font-size: .9rem;
  }  
  
  .caixa{
      width: 100px;
      
  }
  .home1 h2{
      font-size: 3rem;
    
  }
  
 }

/*Extra (xl) large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
    
 }