@font-face {
  font-family: qanelas-black;
  src: url('../fonts/qanela/Qanelas-Black.otf')
}
@font-face {
  font-family: qanelas-semibold;
  src: url('../fonts/qanela/Qanelas-SemiBold.otf')
}
@font-face {
  font-family: qanelas-medium;
  src: url('../fonts/qanela/Qanelas-Medium.otf')
}
@font-face {
  font-family: qanelas-extrabold;
  src: url('../fonts/qanela/Qanelas-ExtraBold.otf')
}
@font-face {
  font-family: qanelas-regular;
  src: url('../fonts/qanela/Qanelas-Regular.otf')
}
@font-face {
  font-family: qanelas-bold;
  src: url('../fonts/qanela/Qanelas-Bold.otf')
}
@font-face {
  font-family: neutraface-titling;
  src: url('../fonts/neutra/NEUTRAFACESLABDISPLAY-TITLING_0.OTF')
}

#video {
  padding: 0 !important;
}
video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(../img/banner-principal.jpg) no-repeat;
    background-size: cover; 
}
/** css header-2 parallax **/
#header-2{height: 100vh;}
.parallax { position: absolute; top: 0; bottom: 0; right: 0; left: 0; }
.parallax-1{background-image: url(../img/parallax-alma-selvagem/alma-selvagem-4.png);}
.parallax-2{background-image: url(../img/parallax-alma-selvagem/alma-selvagem-3.png);}
.parallax-3{background-image: url(../img/parallax-alma-selvagem/alma-selvagem-2.png);}
.parallax-4{background-image: url(../img/parallax-alma-selvagem/alma-selvagem-1.png);}
/**#header-2{background-image: url(../img/parallax-alma-selvagem/alma-selvagem-1.png), 
                            url(../img/parallax-alma-selvagem/alma-selvagem-2.png), 
                            url(../img/parallax-alma-selvagem/alma-selvagem-3.png), 
                            url(../img/parallax-alma-selvagem/alma-selvagem-4.png); 
  background-size: cover; background-repeat: no-repeat;}**/
.parallax-1, .parallax-2, .parallax-3, .parallax-4{ background-size: cover; background-position: 50%; background-repeat: no-repeat; height: 660px; }

/** fim do header-2 **/

.ft-neutra-titling{
  font-family: neutraface-titling
}
.ft-black {
  font-family: qanelas-black
}
.ft-semibold {
  font-family: qanelas-semibold
}
.ft-medium {
  font-family: qanelas-medium
}
.ft-extrabold {
  font-family: qanelas-extrabold
}
.ft-regular {
  font-family: qanelas-regular
}
.ft-bold {
  font-family: qanelas-bold
}
.mini{
  min-height: 250px;
}
.text-p{
  color: #d60056;
}
.section-110{
  padding: 110px 0 ;
}
/**  css crisciano */
#american,
#american-pale,
#weiss,
#california{
  position: relative;
  padding:140px 0;
}
.img-auto{
	margin: 0 auto;
}
.fa-bounce{
  -webkit-animation: bounce 2s ease infinite;
  animation: bounce 2s ease infinite;
}

.ft-10{
  font-size: 10px;
}
.sucesso{
  color: #fff;
  background: green;
}
.sucesso-feed{
  color: #fff;
  background: green;
}
.btn-processo{
  background: transparent;
}
.pl-5{
  padding-left: 5px;
}
.pr-5{
  padding-right: 5px;
}



.icon-1,
.icon-2,
.icon-3,
.icon-4,
.cerveja-1,
.cerveja-2,
.cerveja-3,
.cerveja-4{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.icon-1{
    background: url(../img/parallax-2/icon-1.png);
    background-size: cover;
    background-position-x: 50%;
    /**background-position: center;**/
    background-repeat: no-repeat;
}
.icon-2{
    background: url(../img/parallax-2/icon-2.png);
    background-size: cover;
    background-position-x: 50%;
    background-position: center;
    background-repeat: no-repeat;
}
.icon-3{
    background: url(../img/parallax-2/icon-3.png);
    background-size: cover;
    background-position-x: 50%;
    background-position: center;
    background-repeat: no-repeat;
}
.icon-4{
    background: url(../img/parallax-2/icon-4.png);
    background-size: cover;    
    background-position-x: 50%;
    background-position: center;
    background-repeat: no-repeat;
}

.cerveja-1{
    background: url(../img/parallax-2/cerva-1.png);
    background-size: cover;
    background-position-x: 50%;
    background-position: center;
    background-repeat: no-repeat;
}
.cerveja-2{
    background: url(../img/parallax-2/cerva-2.png);
    background-size: cover;
    background-position-x: 50%;
    background-position: center;
    background-repeat: no-repeat;
}
.cerveja-3{
    background: url(../img/parallax-2/cerva-3.png);
    background-size: cover;
    background-position-x: 50%;
    background-position: center;
    background-repeat: no-repeat;
}
.cerveja-4{
    background: url(../img/parallax-2/cerva-4.png);
    background-size: cover;
    background-position-x: 50%;
    background-position: center;
    background-repeat: no-repeat;
}

/** modal custom  */
.modal {
    padding-right: 0 !important;
}
#contato { 
    background: url(../img/bg-contato.jpg);
    background-size: cover;
}
#contato textarea{
  width: 100%;
  resize: none;
}
#contato input{
  border-radius: 0;
}
#contato button{
  background: #d70056;
  color : #fff;
  border: none;
  border-radius: 0;
}

#contato button:hover{
  background: #d70056;
  color : #fff;
  opacity:.5;
}


#contato .form-group {
    margin-bottom: 5px;
  }




  .modal {
    padding-right: 0 !important;
}
.portfolio-modal  { 
    background: url(../img/bg-contato.jpg);
    background-size: cover;
}
.portfolio-modal  textarea{
  width: 100%;
  resize: none;
}
.portfolio-modal  input{
  border-radius: 0;
}
.portfolio-modal  button{
  background: #d70056;
  color : #fff;
  border: none;
  border-radius: 0;
}

.portfolio-modal  button:hover{
  background: #d70056;
  color : #fff;
  opacity:.5;
}


#contato .form-group {
    margin-bottom: 5px;
  }


.pl-7{
  padding: 0 0 0 7px;
}
.pr-7{
  padding: 0 7px 0 0;
}

.portfolio-modal .modal-content {
    padding: 80px 0;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    background-clip: border-box;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.portfolio-modal .modal-content h2 {
    margin: 0;
    font-size: 3em;
}

.portfolio-modal .modal-content img {
    margin-bottom: 30px;
}

.portfolio-modal .modal-content .item-details {
    margin: 30px 0;
}

.portfolio-modal .close-modal {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 75px;
    height: 75px;
    background-color: transparent;
    cursor: pointer;
}

.portfolio-modal .close-modal:hover {
    opacity: .3;
}

.portfolio-modal .close-modal .lr {
    z-index: 1051;
    width: 1px;
    height: 75px;
    margin-left: 35px;
    background-color: #2c3e50;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.portfolio-modal .close-modal .lr .rl {
    z-index: 1052;
    width: 1px;
    height: 75px;
    background-color: #2c3e50;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.portfolio-modal .modal-backdrop {
    display: none;
    opacity: 0;
}
.section-250{
  padding: 250px 0;
}

.selecao{
  background: url(../img/selecao.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
.btn-selecao{
    font-size: 18px;
    background: transparent;
    border: solid 1px;
}

.btn-sim,
.btn-nao{
  color: #fff;
  border-color: #fff;
}
.btn-sim:hover,
.btn-nao:hover{
  color: #d60056;
  border-color: #d60056;
  opacity: .8;
}
#header{
  /*background: url(../img/banner-principal.jpg);*/
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  padding-top: 200px;
  padding-bottom: 200px;
}

.bg-cerveja{
      font-size: 14em;
  border-bottom: solid 10px #424141;
  /**padding: 50px 70px;**/
  background: #303030;
}

#pub{
  background: url(../img/bg-pub.jpg);
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
}
#distribuidor{
  background: url(../img/seja-distribuidor.jpg);
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  padding-bottom: 300px;

}
.mt-300{
  margin-top: 300px;
}

.nav-container{
  min-height: 0px !important;
}
.navbar{
  min-height: 65px;
}
.navbar-inverse .navbar-nav>li>a {
  color: #fff;
  font-family: lato;
  font-weight: bold;
}

.nav>li>a {
    padding: 18px 22px;
}
.navbar-nav>li>a {
    padding-top: 24px;
    padding-bottom: 24px;
    }
.navbar-inverse {
    background-color: transparent;
    border-color: transparent;
}
.mb-0{
  margin-bottom: 0;
}
.pt-10{
  padding-top: 10px;
}
.pd-footer{
  padding: 0px 65px;
}

#insta .row{
  background: #202020;
}
#map{
  height: 450px;
}

/**
.icon{
    font-size: 10em;
    text-align: center;
    padding: 15px;
    color: #424141;
}
.icon:before {
  font-family: 'icomoon';
  speak: none;
  line-height: 90px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  display: block;
  -webkit-font-smoothing: antialiased;
}
**/
/** fim css crisciano */

.navbar-inverse .navbar-toggle {
  border-color: #fcf8e3;
}
#agradecimento .modal-content{
    padding-top: 0px;
    border-radius: 0;
}
#agradecimento .modal-header{
    border-bottom: none;
    padding-bottom: 0px;
}
#agradecimento .modal-body{
    padding-top: 0px;
}
#agradecimento .close:focus, .close:hover {
  color: #d60056;
}
#agradecimento .close{
  color: #d60056;
}
#agradecimento .modal-dialog {
  margin: 120px auto;
}
section {
  padding: 80px 0
}
footer {
  padding: 30px 0;
  background: #201e1d
}
.wd-12{
      width: 12%;
}
.hi-icon-wrap {
  padding-top: 10px !important
}
.pd-10-0 {
  padding: 10px 0
}
.wd {
  width: 100%
}
#form {
  background: url('../img/bg-form.jpg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover
}
#topo {
  background: url('../img/bg-3.jpg') fixed;
  background-repeat: no-repeat;
  background-position: 50% 10%;
  background-size: cover
}
#brindes {
  background: url('../img/bg-brindes.jpg');
  background-repeat: no-repeat;
  background-position: 80% 30%;
  background-size: cover
}
#separador {
  background: url('../img/bg-1.jpg');
  background-repeat: no-repeat;
  background-position: 100% 15%
}
#separador-2 {
  background: url('../img/bg-2.jpg') fixed;
  background-repeat: no-repeat;
  background-position: 50% 15%;
  background-size: cover
}
.img-center {
  margin: 0 auto
}
.pt {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%)
}
.bg-1 {
  background: #ebebea
}
.pd-50 {
  padding: 50px 0
}
.pd-15-0 {
  padding: 13px 0
}
.no-decoret {
  text-decoration: none !important
}
progress {
  width: 100%
}
/**
*, *:after, *:before {
  font-family: 'Open Sans';
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
**/
.progress .bar {
  background: #fff
}
.progress {
  margin: 20px auto;
  padding-bottom: 80px;
  text-align: center
}
.progress .circle, .progress .bar {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: top;
  border-radius: 40px;
  background: #fff
}
.progress .circle {
  border: 2px solid #fff
}
.progress .bar {
  position: relative;
  top: 16px;
  width: 4%;
  height: 3px;
  margin: -11px -5px 17px -5px;
  vertical-align: top;
  border: none;
  border-right: none;
  border-left: none;
  border-radius: 0;
  background: #fff
}
.progress {
  background: transparent
}
.progress .label {
  padding: 1px 1px
}
.progress .bar.done, .progress .circle.done {
  border-color: #9e9e9e;
  background: #9e9e9e
}
.progress .bar.active {
  background: linear-gradient(to right, #9e9e9e 40%, #fff 60%)
}
.progress .circle.active {
  color: #fff;
  background: #fff
}
#separador-2 h1 {
  margin: 0
}
#separador-2 {
  padding-bottom: 500px
}
.checkbox.custom {
  display: block;
  float: left;
  width: 100%;
  margin: 0;
  margin-bottom: 20px;
  padding: 0
}
input[type='checkbox'].custom {
  margin-left: 0;
  padding: 0
}
input[type=checkbox].css-checkbox {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0
}
input[type=checkbox].css-checkbox + label.css-label-1, 
input[type=checkbox].css-checkbox + label.css-label-2, 
input[type=checkbox].css-checkbox + label.css-label-3, 
input[type=checkbox].css-checkbox + label.css-label-4, 
input[type=checkbox].css-checkbox + label.css-label-5, 
input[type=checkbox].css-checkbox + label.css-label-6, 
input[type=checkbox].css-checkbox + label.css-label-7, 
input[type=checkbox].css-checkbox + label.css-label-8, 
input[type=checkbox].css-checkbox + label.css-label-9,
input[type=checkbox].css-checkbox + label.css-label-10,
input[type=checkbox].css-checkbox + label.css-label-11,
input[type=checkbox].css-checkbox + label.css-label-12,
input[type=checkbox].css-checkbox + label.css-label-13,
input[type=checkbox].css-checkbox + label.css-label-14,
input[type=checkbox].css-checkbox + label.css-label-15{
  font-size: 13px;
  line-height: 15px;
  display: inline-block;
  width: 121px;
  height: 121px;
  padding-left: 22px;
  cursor: pointer;
  -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;
  vertical-align: middle;
  opacity: 1;
  background-repeat: no-repeat;
  background-position: 0 0
}
input[type=checkbox].css-checkbox + label.css-label-1:hover, 
input[type=checkbox].css-checkbox + label.css-label-2:hover, 
input[type=checkbox].css-checkbox + label.css-label-3:hover, 
input[type=checkbox].css-checkbox + label.css-label-4:hover, 
input[type=checkbox].css-checkbox + label.css-label-5:hover, 
input[type=checkbox].css-checkbox + label.css-label-6:hover, 
input[type=checkbox].css-checkbox + label.css-label-7:hover, 
input[type=checkbox].css-checkbox + label.css-label-8:hover, 
input[type=checkbox].css-checkbox + label.css-label-9:hover,
input[type=checkbox].css-checkbox + label.css-label-10:hover,
input[type=checkbox].css-checkbox + label.css-label-11:hover,
input[type=checkbox].css-checkbox + label.css-label-12:hover,
input[type=checkbox].css-checkbox + label.css-label-13:hover,
input[type=checkbox].css-checkbox + label.css-label-14:hover,
input[type=checkbox].css-checkbox + label.css-label-15:hover  {
  opacity: .8
}
input[type=checkbox].css-checkbox:checked + label.css-label-1, 
input[type=checkbox].css-checkbox:checked + label.css-label-2, 
input[type=checkbox].css-checkbox:checked + label.css-label-3, 
input[type=checkbox].css-checkbox:checked + label.css-label-4, 
input[type=checkbox].css-checkbox:checked + label.css-label-5, 
input[type=checkbox].css-checkbox:checked + label.css-label-6, 
input[type=checkbox].css-checkbox:checked + label.css-label-7, 
input[type=checkbox].css-checkbox:checked + label.css-label-8,
input[type=checkbox].css-checkbox:checked + label.css-label-9,
input[type=checkbox].css-checkbox:checked + label.css-label-10,
input[type=checkbox].css-checkbox:checked + label.css-label-11,
input[type=checkbox].css-checkbox:checked + label.css-label-12,
input[type=checkbox].css-checkbox:checked + label.css-label-13, 
input[type=checkbox].css-checkbox:checked + label.css-label-14,
input[type=checkbox].css-checkbox:checked + label.css-label-15 {
  background-position: 0 -123px
}
.css-label-1 {
  background-image: url(../img/icon-cerva/cerva-check-1.png)
}
.css-label-2 {
  background-image: url(../img/icon-cerva/cerva-check-2.png)
}
.css-label-3 {
  background-image: url(../img/icon-cerva/cerva-check-3.png)
}
.css-label-4 {
  background-image: url(../img/icon-cerva/cerva-check-4.png)
}
.css-label-5 {
  background-image: url(../img/icon-cerva/cerva-check-5.png)
}
.css-label-6 {
  background-image: url(../img/icon-cerva/cerva-check-6.png)
}
.css-label-7 {
  background-image: url(../img/icon-cerva/cerva-check-7.png)
}
.css-label-8 {
  background-image: url(../img/icon-cerva/cerva-check-8.png)
}
.css-label-9 {
  background-image: url(../img/icon-cerva/cerva-check-9.png)
}
.css-label-10 {
  background-image: url(../img/icon-cerva/cerva-check-5.png)
}
.css-label-11 {
  background-image: url(../img/icon-cerva/cerva-check-6.png)
}
.css-label-12 {
  background-image: url(../img/icon-cerva/cerva-check-7.png)
}
.css-label-13 {
  background-image: url(../img/icon-cerva/cerva-check-8.png)
}
.css-label-14 {
  background-image: url(../img/icon-cerva/cerva-check-9.png)
}
.css-label-15 {
  background-image: url(../img/icon-cerva/cerva-check-9.png)
}
.border-right {
  border-right: 1px solid
}
.border-left {
  border-left: 1px solid
}
.inp-custom {
  width: 100%;
  color: white;
  border-top: none;
  border-right: none;
  border-bottom: solid 1px white;
  border-left: none;
  outline: 0;
  background: transparent;
  background-image: none;
  -webkit-box-shadow: none;
  box-shadow: none
}
::-webkit-input-placeholder {
  text-align: center;
  color: #fff
}
:-moz-placeholder {
  text-align: center;
  color: #fff
}
::-moz-placeholder {
  text-align: center;
  color: #fff
}
:-ms-input-placeholder {
  text-align: center;
  color: #fff
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  color: white;
  background-color: transparent;
  background-image: none
}
.ft-14 {
  font-size: 14px;
}
.ft-22 {
  font-size: 22px
}
.ft-20 {
  font-size: 20px
}
.ft-36 {
  font-size: 36px
}
.ft-38 {
  font-size: 38px
}
.ft-40 {
  font-size: 40px
}
.ft-45 {
  font-size: 45px
}
.ft-50 {
  font-size: 50px
}
.ft-25 {
  font-size: 25px
}
.ft-18 {
  font-size: 18px
}
.ft-16 {
  font-size: 16px
}
.ft-19 {
  font-size: 19px
}
.pd-0 {
  padding: 0
}
.pd-10 {
  padding: 10px 0
}
.pd-15 {
  padding: 15px 0
}
.pd-25 {
  padding: 25px 0
}
.pd-10-10 {
  padding: 10px
}
.pd-15-15 {
  padding: 15px
}
.pd-15-45 {
  padding: 15px 45px
}
.pd-25-25 {
  padding: 25px
}
.pt-10 {
  padding-top: 10px
}
.pt-15 {
  padding-top: 15px
}
.pt-25 {
  padding-top: 25px
}
.pb-10 {
  padding-bottom: 10px
}
.pb-15 {
  padding-bottom: 15px
}
.pb-25 {
  padding-bottom: 25px
}
.mg-0 {
  margin: 0
}
.mb-10 {
  margin-bottom: 10px
}
.mb-15 {
  margin-bottom: 15px
}
.mb-25 {
  margin-bottom: 25px
}
.mb-50 {
  margin-bottom: 50px
}
.mt-10 {
  margin-top: 10px
}
.mt-15 {
  margin-top: 15px
}
.mt-25 {
  margin-top: 25px
}
.mt-0 {
  margin-top: 0
}
.btn-custom {
  border-color: #000;
  background: #000
}
.btn-custom-1 {
  border-color: #000;
  background: #fff
}
.btn-custom-2 {
  border-color: #fff;
  background: #fff
}
.btn-custom-3 {
  font-size: 20px;
  padding: 10px 25px;
  text-decoration: none;
  color: white;
  border: solid 1px white;
  background: transparent
}
.btn-custom-3:hover {
  text-decoration: none;
  color: black;
  border: solid 1px white;
  background: white
}
.btn-facebook {
    border-color: #3b5999;
    white-space: normal;
    color: rgb(255, 255, 255);
    border-width: 1px;
    border-radius: 5px;
    font-size: 12px;
    background: #3b5999;
}
#face-javali {
  margin-left: 35px;
}
#face-javali a:hover {
  text-decoration: none;
  color: white;
}
.color-1 {
  background: #fff
}
.color-2 {
  background: #000
}
.color-3 {
  background: #eee
}
.text-pt {
  color: #000
}
.text-br {
  color: #fff
}
.text-pk {
  color: #d60056
}
.text-rs {
  color: #d60056
}
.text-b {
  font-weight: bold
}
.mg-auto {
  margin-right: auto;
  margin-left: auto
}

iframe[name="google_conversion_frame"]{
  display: none;
}
a,
a:focus,
a:hover{
  text-decoration: none;
}
#cervejas-header .icon{
  font-size: 5em;
  color: rgba(255, 255, 255, 0.4);;
}
.mt-35{
  margin-top: 35px;
}

@media (max-width: 480px) {
  #cervejas-header .icon {
    color: rgba(255,255,255,0.8);
  }
  .section-250 {
      padding: 209px 0;
  }
  #distribuidor {
    background: url(../img/seja-distribuidor-xs.jpg);
    background-size: cover;
    background-position: center 100%;
    background-repeat: no-repeat;
    padding-top: 50px;
    padding-bottom: 380px;
  }
	.vh-xs{
		visibility: hidden;
	}
	.mt-110{
		margin-top: 0px;
	}
	#american, #american-pale, #weiss, #california {
	    padding: 30px 0;
	}

  .media-grid .media-list-item {
    width: 50% !important;
  }
  .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border: none;
    box-shadow: none;
  }
  .navbar-nav>li>a {
      padding-top: 12px;
      padding-bottom: 12px;
  }
  .midias{
        text-align: center;
    width: 32%;
    display: inline-block !important;
  }
  .navbar-inverse {
    background-color: #202020;
  }
  .pr-7 {
      padding: 0;
  }
  .pl-7 {
      padding: 0;
  }
  .pl-5{
    padding-left: 15px;
  }
  .pr-5{
    padding-right: 15px;
  }
  .form-contato button,
  .form-feed button{
    width: 100%;
  }
  .img-footer{
        max-height: 55px;
  }
  .bg-cerveja {
    border-left: solid 10px #424141;
    border-bottom: none;
    background: -moz-linear-gradient(top, #45484d 0%, #303030 100%);
    background: -webkit-linear-gradient(top, #45484d 0%,#303030 100%);
    background: linear-gradient(to bottom, #45484d 0%,#303030 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#303030',GradientType=0 );
  }
  .cerva-1{border-color:#d70056;}
  .cerva-2{border-color:#2fc0ce;}
  .cerva-3{border-color:#f4c960;}
  .cerva-4{border-color:#fc2d78;}

  #header-2 {background:url(../img/parallax-alma-selvagem/parallax-alma-selvagem-mobile.png); background-repeat: no-repeat; background-size: cover; background-position: center; position: relative;
    top: 50px;}

}

@media (min-width: 480px) and (max-width: 768px) {
.section-250 { padding: 226px 0; }
#american, #american-pale, #weiss, #california { padding: 80px 0; }
.img-footer { max-height: 55px; }
.navbar-nav>li>a { padding-top: 8px; padding-bottom: 8px; }
.navbar-toggle { margin-top: 12px; margin-bottom: 12px; }
.navbar-inverse { background-color: #202020; }
.text-xs-center { text-align: center }
.text-xs-left { text-align: left }
.text-xs-right { text-align: right }
.nav>li { text-align: center; }
.midias { width: none; display: inline-block !important; }
.nav>li>a { padding: 18px 12px; }
.pl-5 { padding-left: 15px; }
.pr-5 { padding-right: 15px; }
.border-left { border-left: none }
.border-right { border-right: none }
.text-xs-center { text-align: center }
.text-xs-left { text-align: left }
.text-xs-right { text-align: right }
#top { height: 100vh }
.pl-5 { padding-left: 15px; }
.pr-5 { padding-right: 15px; }
}

@media (min-width: 768px) and (max-width: 992px) {
  .nav>li>a { font-size: 12px; padding: 22px 5px; }
  .bg-cerveja { font-size: 10em; }
  #top { height: 100vh }
  #header-2{height: 150vh;}
}

@media (min-width: 992px) and (max-width: 1200px) { 
#top { height: 100vh }
.nav>li>a { padding: 22px 12px; }
#header-2{height: 120vh;}
}

@media (min-width: 1440px) and (max-width: 1920px) { 
#separador { background: url(../img/bg-1-lg.jpg); background-position: 150% 50%; background-repeat: no-repeat; }
#header-2{height: 80vh}
}