@font-face {
    font-family: 'Gotham-Bold';
    src: url('../fonts/Gotham-Bold.woff2') format('woff2'),
        url('../fonts/Gotham-Bold.woff') format('woff'),
        url('../fonts/Gotham-Bold.ttf') format('truetype'),
        url('../fonts/Gotham-Bold.svg#Gotham-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham-Light';
    src: url('../fonts/Gotham-Light.woff2') format('woff2'),
        url('../fonts/Gotham-Light.woff') format('woff'),
        url('../fonts/Gotham-Light.ttf') format('truetype'),
        url('../fonts/Gotham-Light.svg#Gotham-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham-Book';
    src: url('../fonts/Gotham-Book.woff2') format('woff2'),
        url('../fonts/Gotham-Book.woff') format('woff'),
        url('../fonts/Gotham-Book.ttf') format('truetype'),
        url('../fonts/Gotham-Book.svg#Gotham-Book') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham-Medium.woff2') format('woff2'),
        url('../fonts/Gotham-Medium.woff') format('woff'),
        url('../fonts/Gotham-Medium.ttf') format('truetype'),
        url('../fonts/Gotham-Medium.svg#Gotham-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BorisBlackBloxx';
    src: url('../fonts/BorisBlackBloxx.woff2') format('woff2'),
        url('../fonts/BorisBlackBloxx.woff') format('woff'),
        url('../fonts/BorisBlackBloxx.ttf') format('truetype'),
        url('../fonts/BorisBlackBloxx.svg#BorisBlackBloxx') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

.navbar{
	padding: 0px !important;
	background-color: #ff9000 !important;
	margin: 0 auto !important;
	text-align: center;
	height: 50px;
}

.navbar-nav{
	margin: 0 auto;
}

.nav-item-menu a{
	padding: 10px 10px 10px 10px;
	color: #450256;
	font-family: 'Gotham-Bold';
	height: 40px;
	min-width: 100px; 
}

.oque-e-texto{
	font-family: 'Gotham-Book';
	color: #3c3c3b;
	text-align: left;
	padding: 25px 0px 0px 0px !important;
}

.spaces-paragrafo{
	width: 25px;
    display: inline-block;
}

.a-um-clique-texto{
	font-family: 'Gotham-Book';
	color: #450256;
	text-align: left;
	padding: 20px 0px 0px 0px !important;
}

.total-video-header{
	max-width: 769px;
	text-align: center;
	display: block;
	margin: 0 auto;
	margin-top: 80px; 
}

.total-video-header iframe{
	display: block; 
	margin: 0 auto; 
	text-align: center;
	width: 100%;
	height: 415px;
}

.total-imagens-home{
	padding-top: 60px;
}

.total-container-home{
	max-width: 100%;
}

.titulo-oque-e-home{
	border: 1px solid #420251;
    border-radius: 50px;
    padding: 15px 0px 15px 30px;
    margin-left: 70px;
    text-align: left;
    color: #450256 !important;
    position: relative;
    width: 100%;
    font-family: 'BorisBlackBloxx';
    font-size: 60px;
}

.total-imagem-cervejas-um-clique{
	position: relative;	
}

.total-texto-cervejas-um-clique{
	padding: 0px 50px 0px 50px;
}

.total-texto-postagem-interna > p > img{
	width: 100% !important;
	border-radius: 10px;
}
.total-texto-postagem-interna > p > a > img{
	width: 100% !important;
	border-radius: 10px;
}

.img-cervejas-um-clique{
	position: absolute;
	right: 0;
	width: 60%;
	max-width: 450px;
}

.total-textos-a-um-clique{
	padding-right: 50px;
}

.titulo-a-um-clique{           
    display: grid;
    border: 1px solid #420251;
    border-radius: 50px;
    padding: 15px 15px 15px 100px;
    color: #450256 !important;
    line-height: 45px;
    position: relative;
    width: 100%;
    font-family: 'BorisBlackBloxx';
    font-size: 70px;
}

.img-logo{
	display: block;
    margin: 0 auto;
    max-width: 350px;
    width: 100%;
    z-index: 1;
    margin-top: 100px;
    margin-left: 40%;
}

.img-garrafas{
	position: relative;
	display: block;
	margin: 0 auto;
	max-width: 500px;
	margin-top: 100px;
	width: 100%;
	z-index: 999 !important;
}

.titulo-oque-e-home > span{
    font-family: 'BorisBlackBloxx';
	text-shadow: -1px 0 #420251, 0 1px #420251, 1px 0 #420251, 0 -1px #420251 !important;
    color: #FFF !important;
}

.titulo-a-um-clique > span{
    font-family: 'BorisBlackBloxx';
	text-shadow: -1px 0 #420251, 0 1px #420251, 1px 0 #420251, 0 -1px #420251 !important;
    color: #FFF !important;
}

.fundo-copos{
	position: absolute;
	right: 0;
	z-index: -999;
}

.fundo-garrafas-um-clique{
	position: absolute;
	left: 0;
	z-index: -999;
}

.etapas-enche-o-copo{
	margin-top: 150px;
}

.icones-etapas-enche-o-copo{
	display: block;
	margin: 0 auto;
	padding-top: 15px;
	padding-bottom: 15px;
}

.total-etapas-enche-copo h5{
	text-align: center;
	font-size: 16px;
	font-family: 'Gotham-Bold';
    margin-bottom: 5px;
	color: #420251;
}

.total-etapas-enche-copo a{
	font-size: 16px;
	background-color: #420251;
	border-radius: 100px;
	font-family: 'Gotham-Bold';
    margin-bottom: 5px;
	color: #FFF;
	padding: 5px 15px 5px 15px;
}

.total-header-topo-nav{
    position: fixed;
    z-index: 99999;
    width: 100%;
}

.total-coluna-icone{
	border-right: 2px solid #420251;
	padding: 25px;
}

.total-detalhes-etapas{
	margin-top: 150px;
	margin-bottom: 150px;
	padding: 0px 50px 0px 50px;
}

.titulo-detalhes-ecommerce{
	font-family: 'BorisBlackBloxx';
	font-size: 60px;
	color: #ff9000;
}

.titulo-detalhes-localizador{
	font-family: 'BorisBlackBloxx';
	font-size: 60px;
	color: #420251;
}

.titulo-detalhes-consultor{
	font-family: 'BorisBlackBloxx';
	font-size: 60px;
	color: #ff9000;
}

.titulo-detalhes-pdv{
	font-family: 'BorisBlackBloxx';
	font-size: 60px;
	color: #420251;
}

.total-detalhes-etapas p{
	font-family: 'Gotham-Light' !important;
	font-size: 18px;
	line-height: 20px;
	color: #3c3c3b;
}

.total-detalhes-etapas-linha{
	margin-top: 70px;
}

.botao-saiba-mais-icones:hover{
	color: #FFF;
	text-decoration: none;
}

.botao-saiba-mais-icones{
	background-color: #ff9000;
	padding: 10px 30px 10px 30px;
	color: #FFF;
	height: 30px;
	font-weight: bold;
	font-family: 'Gotham-Bold';
	border-radius: 30px;
}

.botao-saiba-mais-icones-localizador{
	background-color: #420251;
	padding: 10px 30px 10px 30px;
	color: #FFF;
	font-weight: bold;
	font-family: 'Gotham-Bold';
	border-radius: 30px;
}

.imagem-detalhes-ecommerce{
	width: 100%;
	display: block;
	margin: 0 auto;
}

.imagem-detalhes-localizador{
	width: 100%;
	max-width: 210px;
	display: block;
	margin: 0 auto;
}

.imagem-detalhes-consultor{
	width: 100%;
	max-width: 210px;
	display: block;
	margin: 0 auto;
}

.imagem-detalhes-sou-pdv{
	width: 100%;
	max-width: 210px;
	display: block;
	margin: 0 auto;
}

.titulo-detalhes-contato{
	width: 100%;
	text-align: center;
	font-family: 'BorisBlackBloxx';
	font-size: 40px;
	color: #ff9000;
}

.total-coluna-icone:last-child{
	border-right: none;
	padding: 25px;
}

.navbar-light .navbar-toggler{
	outline: none !important;
}

.total-detalhes-etapas-linha-contato{
	text-align: center;
}

.total-etapas-enche-copo p{
	padding: 0px;
	font-size: 12px;
	color: #3c3c3b;
	text-align: center;
}

.total-etapas-enche-copo{
	border: 2px solid #420251;
	border-radius: 150px;
}

.total-textos-copos-header{
	padding-top: 40px;
}

.total-o-que-e{
	margin-top: 100px;
}

.cervejas-a-um-clique{
	margin-top: 100px;
}

.img-copo-header{
	position: absolute;
	right: 0px;
	top: 15px;
	width: 35%;
	z-index: 99 !important;
}

.nav-item-menu a:hover{
	text-decoration: none !important;
	color: #FFF;
}

.nav-link-menu-sou-pdv{
	border-radius: 10px !important;
	background-color: #450256 !important;
	color: #FFF !important;
	padding: 5px 15px 5px 15px !important;	
}


.total-header-menus{
	margin: 0 auto !important;
	background-color: #ff9000 !important;
}


/*###########################################*/
/*###########################################*/
/*###########################################*/
/*###########################################*/
/*###########################################*/

@media only screen and (max-width: 768px){

	.img-logo{
		margin-top: 15px !important;
		display: block;
		margin: 0 auto !important;
		padding: 30px;
	}

	.img-copo-header{
		display: none !important;
	}

	.img-garrafas{
   		margin-top: 0px;
	}

	.fundo-garrafas-um-clique{
		width: 100%;
	}

	.total-o-que-e{
		margin-top: 20px;
	}

	.titulo-oque-e-home{
		text-align: center;
		margin-left: 0px;
		padding: 15px 0px 15px 0px;
	}

	.total-video-header iframe{
		height: 390px;
	}

	.oque-e-texto{
		text-align: center;	
	}

	.img-copos-oque-e{
		display: none;
	}

	.fundo-copos{
		display: none;
	}

	.total-textos-a-um-clique{
		padding-right: 15px;
	}

	.nav-item-menu{
		margin-bottom: 10px;
	}

	.navbar-toggler{
		margin-left: 10px;
	}

	.titulo-a-um-clique {
	    display: grid;
	    border: 1px solid #420251;
	    border-radius: 50px;
	    padding: 15px 15px 15px 15px;
	    color: #450256 !important;
	    line-height: 45px;
	    position: relative;
	    width: 100%;
	    font-family: 'BorisBlackBloxx';
	    font-size: 55px;
	    text-align: center;
	}

	.img-cervejas-um-clique{
		display: none;
	}

	.a-um-clique-texto{
		text-align: center;
	}

	.etapas-enche-o-copo{
		margin-top: 50px;
	}

	.total-etapas-enche-copo{
		border: none;
	}

	.total-coluna-icone{
		border: none;
	}

	.titulo-detalhes-ecommerce{
		font-size: 40px;
		text-align: center;
	}

	.titulo-detalhes-localizador{
		font-size: 40px;
		text-align: center;
	}

	.titulo-detalhes-consultor{
		font-size: 40px;
		text-align: center;
	}

	.titulo-detalhes-pdv{
		font-size: 40px;
		text-align: center;
	}

	.total-detalhes-etapas{
		margin-top: 25px;
		padding: 0px 25px 0px 25px;
	}

	.imagem-detalhes-ecommerce{
		margin-top: 25px;
	}

	.total-textos-detalhes-etapas{
		text-align: center;
	}

	.imagem-detalhes-localizador{
		margin-bottom: 25px;
	}

	.imagem-detalhes-sou-pdv{
		margin-bottom: 25px;
	}

	.imagem-detalhes-consultor{
		margin-top: 25px;
	}

}

/*###########################################*/
/*###########################################*/
/*###########################################*/
/*###########################################*/
/*###########################################*/

@media (min-width: 1920px){
  .etapas-enche-o-copo{
  	margin-top: 300px;
  }
}

/*###########################################*/
/*###########################################*/
/*###########################################*/
/*###########################################*/
/*###########################################*/

@media (min-width: 768px) and (max-width: 1200px){
	.img-logo{
	    margin-left: 10% !important;
	}
}


/*###########################################*/
/*###########################################*/
/*###########################################*/
/*###########################################*/
/*###########################################*/


@supports (-webkit-touch-callout: none) {

	.oque-e-texto{
		font-family: -apple-system;
	}

	.a-um-clique-texto{
		font-family: -apple-system;
	}

	.total-etapas-enche-copo{
		font-family: -apple-system;
	}

	.total-etapas-enche-copo{
		font-family: -apple-system;
	}

	.total-detalhes-etapas{
		font-family: -apple-system;
	}

	.botao-saiba-mais-icones-localizador{
		font-family: -apple-system;
	}

	.botao-saiba-mais-icones{
		font-family: -apple-system !important;
	}

	.nav-link-menu-sou-pdv{
		font-family: -apple-system !important;
	}

	.img-logo{
		text-align: center;
		display: block !important;
	    margin: 0 auto !important;
	    max-width: 350px !important;
	    width: 100% !important;
	    z-index: 1 !important;
	    margin-top: 50px !important;
	    margin-left: 15px !important;
	}

}