/* Layout - Tema */
	.dropdown.my-dropdown button {
		background-color: transparent;
		border: none;
		font-size: 17px;
		transition: all .3s ease-out;
		color: #777
	}
	.dropdown.my-dropdown button:hover { color: #333 }
	.dropdown.my-dropdown .dropdown-toggle::after { display: none }
	.dropdown.my-dropdown .dropdown-menu {
		top: 10px !important;
		left: initial !important;
		right: -5px !important;
		paddin: 1rem 0 !important;
		font-size: 15px;
		border-radius: 10px;
		box-shadow: rgba(0, 0, 0, 0.4) 0px 10px 20px -12px
	}
	.dropdown.my-dropdown .dropdown-item { padding: .25rem 2rem }
	.dropdown.my-dropdown .dropdown-item:focus,
	.dropdown.my-dropdown .dropdown-item:hover { background-color: #f0f0f0 }
	.dropdown.my-dropdown .dropdown-menu a { color: #777 }
	.dropdown.my-dropdown .dropdown-menu a:hover { color: #222 }

/* Header */
	header.fixed {
		border-top: 8px solid var(--cor-principal);
		height: 80px;
		padding: 7px 20px !important
	}
	header.fixed form.form-search input,
	header form.form-search input {
		box-shadow: none;
		border: 1px solid #d6d6d6
	}
	header form.form-search button[type="submit"] {
		background-color: #d6d6d6;
		color: #222
	}
	header.fixed form.form-search button[type="submit"] {
		height: 32px;
	    top: 4px;
	    right: 5px;
	    padding: 0px 20px;
	    font-size: 13px;
	}
	header .content-right .my-btn,
	header .content-right .my-btn:hover {
		background-color: var(--cor-principal);
		color: white
	}
	header .content-right li a { color: var(--cor-principal) }
	header.fixed a.btn-categorias {
		color: var(--cor-principal);
		background-color: initial;
		font-size: 14px;
		font-weight: normal;
		text-decoration: none;
		cursor: pointer
	}
	header .btn-perfil {
		background-color: transparent !important; 
		border: 1px solid var(--cor-principal) !important;
		color: var(--cor-principal) !important
	}
	header .btn-perfil:hover {
		background-color: var(--cor-principal) !important;
		color: white !important;
		opacity: 1 !important
	}
	header .btn-membro {
		color: var(--cor-principal);
		text-decoration: none
	} 
	header .btn-membro:hover { opacity: .85 } 

/* Home */
	.paginacao-beneficios .my-btn {
		padding: 3px 15px;
		margin: 0 1px;
		border: 2px solid
	}

/* Home - Modal */
	#modalHome .modal-dialog { max-width: 80% }
	#modalHome button.close {
		top: -5px;
		right: -35px;
		font-size: 35px
	}
	#modalHome .modal-content {
		border-radius: initial;
		border: initial
	}
	#modalHome .modal-header,
	#modalHome .modal-header {
		border-top-right-radius: initial;
		border-top-left-radius: initial
	}

/* Beneficios - Cupom via e-mail */
	#cuponsViaEmail .modal-dialog { max-width: 500px }
	#cuponsViaEmail button.close {
		top: -5px;
		right: -35px;
		font-size: 25px;
		color: white
	}
	#cuponsViaEmail .modal-content {
		border-radius: 10px;
		border: initial
	}
	#cuponsViaEmail .modal-header,
	#cuponsViaEmail .modal-header {
		border-top-right-radius: initial;
		border-top-left-radius: initial
	}

/* Categorias */
	section.categorias .categoria { width: 90px }
	section.categorias .categoria .thumb {
		width: initial;
		height: initial
	}
	section.categorias .categoria .thumb-icon {
		width: 55px;
		height: 55px
	}
	section.categorias img {
		max-width: 55px;
		max-height: 55px
	}
	section.categorias .categoria .thumb,
	section.categorias .categoria .thumb-icon {
		box-shadow: none
	}
	section.categorias .categoria:hover .thumb-icon { box-shadow: none }
	section.categorias .categoria .thumb:hover img { opacity: initial }
	section.categorias .categoria p.titulo {
		font-weight: 400;
		transition: all .3s }
	section.categorias .categoria:hover p.titulo,
	section.categorias .categoria p.titulo:hover {
		opacity: initial;
		font-weight: 700
	}

/* Fale Conosco */
	section.fale-conosco .intro-content {
		background: linear-gradient(to left,#e29933,#c13216);
		color: white
	}
	section.fale-conosco .intro h2 { font-size: 32px }
	section.fale-conosco .intro p { font-size: 20px }
	section.fale-conosco .block {
		max-width: 300px;
	    height: 140px;
		width: 100%;
		padding: 18px;
	    border-radius: 2px;
	    background-color: #f5f5f5;
	    border: 1px solid #dfdfdf;
	    color: #666;
	    cursor: pointer;
	    transition: border 200ms ease;
	}
	section.fale-conosco .blocks-content .call {
		font-size: 22px;
		color: #622e8d
	}
	section.fale-conosco .blocks-content .block a {
		color: #666;
		text-decoration: none
	}
	section.fale-conosco .blocks-content .block .title p { font-weight: 500 }
	section.fale-conosco .blocks-content .block .desc p {
		padding-left: 24px;
	    font-size: 14px;
	    line-height: 1.2;
	    margin-top: 12px
	}
	section.fale-conosco .blocks-content .block:not(:last-child) { margin-right: 15px }
	section.fale-conosco .blocks-content .block:hover { border-color: #e9b425 }
	section.fale-conosco #collapseContact {
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
		transition: all 0.15s;
		color: #666;
	}

/* Cupom Modal */
	.modal-backdrop.show { opacity: .8 }
	#cupomModal button.close {
		color: white;
		font-size: 35px;
		top: -25px;
		right: -45px;
		z-index: 1000;
		opacity: .75
	}
	#cupomModal button.close:hover { opacity: 1 }
	#cupomModal .modal-dialog { max-width: 720px }
	#cupomModal .modal-content {
		border: none;
		background-color: white;
		border-radius: 10px;
		text-align: center;
		padding: 10px;
		margin-top: 100px;
	}
	#cupomModal .logo-parc-ben {
		max-width: 115px;
		height: auto;
		max-height: 65px;
		width: auto
	}
	#cupomModal .img-ben {
		max-width: 225px;
		border-radius: 7px
	}
	#cupomModal .titulo-ben {
		font-size: 23px;
		font-weight: 500
	}
	/*#cupomModal .cupom-box {
		border-radius: 7px;
		border: 1px solid var(--cor-principal);
		margin-top: 7px;
		max-height: 225px;
		overflow-y: scroll
	}*/
	#cupomModal .cupom-box::-webkit-scrollbar { width: 10px }
	#cupomModal .cupom-box::-webkit-scrollbar-track { background: transparent }
	#cupomModal .cupom-box::-webkit-scrollbar-thumb {
		background-color: var(--cor-principal);    
		border-radius: 20px;
		border: 2px solid white
	}
	#cupomModal .cupom-box p { margin: 0 }
	#cupomModal .cupom-box > p { font-size: 12px }
	#cupomModal .copy-to-clipboard, #cupomModal .to-unique-download { padding: 2px 9px }
	#cupomModal .copy-to-clipboard i { font-size: 13px }
	#cupomModal p.clipboard-alert {
		position: absolute;
		right: 0%;
		background-color: black;
		color: white;
		padding: 3px 6px;
		border-radius: 7px;
		font-size: 10px;
		pointer-events: none;
	}
	#cupomModal .validade-ben p { font-size: 11px }
	#cupomModal .cta-ben-resg { margin-top: auto }
	/*#cupomModal p.call {
		font-size: 25px;
	}
	#cupomModal p.call + p {
		font-size: 14px;

	}
	#cupomModal p.cupom {
		font-weight: bold;
		font-size: 36px;
		margin: 0
	}
	#cupomModal .clipboard-alert {
		position: absolute;
	    right: 10%;
	    bottom: 0px;
	    font-size: 12px;
	    font-weight: 400;
	}*/

/* Entrar Modal */
	#modalEntrar .modal-dialog { max-width: 42% }
	#modalEntrar a { color: #2d65a1 }
	#modalEntrar a:hover { color: #78a5d5 }

/* Footer */
	footer ul li { text-transform: initial }
	footer p.titulo { font-size: 24px }
	footer .bkgd { margin-top: -65px }
	footer .pos-footer {
        padding: 25px 0;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd
    }
    footer .cel-message img { width: 70px }
    footer .cel-message p {
        margin: 0;
        font-size: 12px;
        color: #8056C1;
        line-height: 20px
    }
    footer .social p {
        color: #622e8d;
        font-size: 18px
    }
    footer .social img { width: 60px }


/* Media Queries */
@media only screen and (min-width: 1350px) {
	#modalHome .modal-dialog { max-width: fit-content }
}

/* Smartphone Portrait - xs */
@media (max-width: 600px) and (orientation: portrait) {
	/* Header */
		header { height: 80px }
		header .btn-login { padding: 6px 15px !important }
		header .menu-mobile { border-top: 8px solid var(--cor-principal) }
		header .menu-mobile a.btn-entrar { color: white }
		header .menu-mobile .btn-close {
			top: 7px;
			right: 10px
		}
		header div.logo {
			height: 100%;
			align-content: center
		}
	/* Home */
		.paginacao-beneficios .my-btn { font-size: 20px }
	/* Home - Modal */
		#modalHome .modal-dialog {
			max-width: 100%;
			margin-top: 105px
		}
		#modalHome .modal-content {
			background-color: transparent
		}
		#modalHome button.close {
		    top: -50px;
		    right: 15px;
		    font-size: 40px;
		}
	/* Beneficio */
		.row-interno-beneficio .info-beneficio .cupom .thumb-cupom h3 {
		    font-size: 35px;
		    line-height: 25px;
		    margin: 0 0 15px
		}
		.row-interno-beneficio .descricao > p:last-of-type { text-align:center }
		#cupomModal .modal-dialog { max-width:inherit }
		#cupomModal .modal-content { margin-top: inherit }
		#cupomModal .logo-parc-ben {
			max-width: 50%;
			max-height: 55px
		}
		#cupomModal .img-ben { max-width: 100% }
		#cupomModal .cupom-box p.cupom-ben {
			font-size: 35px;
			line-height: 25px
		}
		#cupomModal .copy-to-clipboard { padding: 3px 7px }
		#cupomModal .copy-to-clipboard i { font-size: 17px }
		#cupomModal .validade-ben { margin-bottom:15px }
		#cupomModal button.close {
			font-size: 40px;
			color: black;
			opacity: 1;
			top: -7px;
			right: 0
		}
		#cupomModal .cupom-box > p {
			font-size: 20px;
			margin-bottom: 7px;
		}
		.coupom-order, .pos-coupom-order {
			font-size: 15px;
			margin-bottom: 5px
		}
		.cupom-box .my-coupom {
			font-size: 32px;
	        line-height: 22px;
		}
	/* Entrar - Modal */
		#modalEntrar .modal-dialog { max-width: inherit; }
		#modalEntrar .modal-header p { font-size: 15px }
	/* Categorias */
		section.categorias .categoria p.titulo { text-wrap: nowrap }
	/* Fale conosco	*/
		section.fale-conosco .intro-content { font-size: 18px }
		section.fale-conosco .blocks-content .block:not(:last-child) { margin-right: 0 }
	/* Footer	*/
		footer .bkgd { margin-top: inherit; }
		footer .cel-message p { font-size: 15px }

}
@media (max-width: 360px) and (orientation: portrait) {
	/* Beneficio */
		#cupomModal .clipboard-alert {
			right: 10%;
			bottom: -6px;
		}
}
@media (max-width: 320px) and (orientation: portrait) {
	/* Beneficio */
		#cupomModal .modal-body { padding: 0px !important }
		#cupomModal .logo-parc-ben,
		#cupomModal .titulo-ben,
		#cupomModal .validade-ben p { margin-bottom: 5px !important }
		#cupomModal .titulo-ben { font-size: 20px }
		#cupomModal .img-ben { max-width:70% }
		#cupomModal .cupom-box {
			padding: 5px !important;
			margin-bottom: 10px !important;
		}
		#cupomModal .cupom-box p.cupom-ben { font-size: 28px }
		.cupom-box .my-coupom { font-size:29px }
	/* Categorias */
		section.categorias .categoria p.titulo { font-size: 16px }
	/* Home */
		.paginacao-beneficios .my-btn {
			padding: 5px 15px;
			line-height: 22px;
			font-size: 12px
		}
}