@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Holtwood+One+SC|Roboto:400,700');

html, body {font-family: 'Roboto', sans-serif;}
body {padding-top:95px;}
img {border-style: none;}
a {color:#fff;}
a:hover {color:#fff; text-decoration:none;}

.pt-120 {padding-top:120px;}
.pb-120 {padding-bottom:120px;}

h1 {font-family: 'Holtwood One SC', serif; font-size: 30px;}
h2 {font-family: 'Lobster', serif;}
h3 {font-family: 'Lobster', serif; font-size: 48px;}
.display-3 {line-height:0.8em;}


.nav-item {text-transform:uppercase; font-size:0.9em;}
.nav-item a:hover {color:rgba(255, 255, 255, 1);}

.red {background-color:#e6332a;}
.green {background-color:#1e8190;}
.black {background-color: #0d1819;} 
.kraft {background: rgba(30, 129, 144, 1) url("img/fibers.png") repeat;}

.btn-primary {background-color:transparent; border: 1px solid #1e8190; border-radius:3px;}
.btn-primary:hover {background-color:#1e8190; border-radius:3px; border: 1px solid #1e8190; }

.table, .table-cell {display: table; height: 100%;}
.table-cell {display: table-cell; vertical-align: middle;}

.textura {background: rgba(0, 0, 0, 0)  scroll center center / cover; width:100%; height:100vh;}

.hop {background: rgba(42, 50, 51, 1) url("img/hop.png") repeat;}

.borda {border: 4px solid #fff; border-radius:4px;}

.ribbon {
 /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
 width: 80%;
 position: relative;
 background: #e6332a;
 color: #fff;
 text-align: center;
 padding: .5em .5em; /* Adjust to suit */
 margin: 0 auto 1.5em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:before, .ribbon:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -.7em;
 border: 1em solid #e6332a;
 z-index: -1;
}
.ribbon:before {
 left: -1em;
 border-right-width: 1em;
 border-left-color: transparent;
}
.ribbon:after {
 right: -1em;
 border-left-width: 1em;
 border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #000 transparent transparent transparent;
 bottom: -.7em;
}
.ribbon .ribbon-content:before {
 left: 0;
 border-width: .7em 0 0 1em;
}
.ribbon .ribbon-content:after {
 right: 0;
 border-width: .7em 1em 0 0;
}
.non-semantic-protector { position: relative; z-index: 1; }

.opaco {
    opacity: 0.4;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

.opaco:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

ul li.scrollTop {
float: right;}

<!--Responsividade-->

@media (max-width: 575px) {

body {padding: 0 30px;}

}