/*

CSS para a Barra no bottom do site
Criado por Estevao Teixeira

Estrutura
    nav (.barra-bottom-nav .hidden)
    - div (.container)
    -- div (.navbar-header)
    --- ul (.barra-bottom)
    ----- li,li....


*/

html {scroll-behavior: smooth;}
.barra-bottom-nav {box-shadow: 0px -5px 10px 0px #000033;background: rgba(0,0,0,0.8);}
.barra-bottom-xs>li>a:focus, .barra-bottom-xs>li>a:hover {background-color: #333;}
.barra-bottom li:not(:first-child) {padding: 10px;}
.barra-bottom h3 { color:#666666; font-weight: bold;  font-size: 23px;line-height: 1;margin:0;  }
.barra-bottom li a {font-size: 20px;color: #fff !important;padding:0;}
.barra-bottom li:nth-child(n + 4) {font-size: 30px}
.barra-bottom li:nth-child(n + 4) a {font-size: 24px; padding-top: 14px;}
.barra-bottom .icon-destaque {top: 10px;position: relative;font-size: 43px;color: #fff;}
.barra-bottom i:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}
@keyframes shake {
  10%, 90% {transform: translate3d(-1px, 0, 0);}
  20%, 80% {transform: translate3d(2px, 0, 0);}
  30%, 50%, 70% {transform: translate3d(-4px, 0, 0);}
  40%, 60% {transform: translate3d(4px, 0, 0);}
}
.p-y-md {padding-bottom: 120px !important;}

@media all and (max-width: 1200px) {
    .barra-bottom li:nth-child(n + 4) a {font-size: 20px;}
    .barra-bottom li:not(:first-child) {padding: 10px 5px;}
    .barra-bottom h3 {font-size: 20px;}
    .barra-bottom li a {font-size: 17px;}
}

@media all and (max-width: 1000px) {

    .p-y-md {padding-bottom: 180px !important;}
    .barra-bottom-xs li:first-child 
    {
        font-size: 20px;
        color: #f2c40e;
        padding: 0 0 18px;
        border-bottom: 3px solid #272727;
        /*background: #333;*/
        /*border-radius: 5px;*/
        margin-bottom: 15px;
    }
    .barra-bottom-xs li:not(:first-child) {
        border: 1px solid #4a4949;
        background: #333;
        border-radius: 40px;
    }
    .barra-bottom-xs li:nth-child(n+2) {
        margin-right: 10px;
    }
}