/*Arquivo CSS*/
/*Reset CSS*/
*, *:after, *:before{
    box-sizing: border-box;
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0;
    padding: 0;
    outline: 0;
}
body{
    padding-top: 204px;
}
/*botão*/
button, input[type="submit"]{
    border: 0;
    cursor: pointer;
}
/*links*/
a{
    text-decoration: none;
}

/*listas*/
ol, ul, li{
    list-style: none;
}

label{
    cursor: pointer;
}

/*Container*/
.container{
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2%;
    position: relative;
}
/*Flex*/
.flex{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.align-items{
    align-items: center;
}

.space-evenly{
    justify-content: space-evenly;
}

.justify-center{
    justify-content: center;
}
/*Cabeçalho da página*/
.header{
    background: #FFE6C2;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

/*Linha de altura do cabeçalho*/
.header .line{
    height: 150px;
}

/*Margem entre os elementos do cabeçalho*/
.header .line>:not(:last-child):not(.support):not(.empty):not(.logo){
    margin-right: 70px;
}

/*Margem do suporte*/
.header .line>.support{
    margin-right: 50px;
    margin-left: 55px;
}
/*Margem do carrinho*/
.header .line > .cart{
    margin-right: 65px;
}
/*crescimento da div vazia*/
.header .empty{
    flex-grow: 1;
}
/*Área Ícones*/
.header .support, .header .user, .header .cart{
    align-items: center;
    cursor: pointer;
    display: flex;
    position: relative;
}

/*Texto user*/
.header .user .a{
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

.header .support span, .header .user .a{
    font-size: 19px;
}

.header .user .c{
    color: #E76522;
}

/*Ícones cabeçalho*/
.header .support svg, .header .user svg, .header .cart svg{
    color: #0F0F0F;
    height: 50px;
    width: 50px;
}

/*Adicionado uma margem ao ícone de suporte*/
.header .support svg{
    margin-right: 10px;
}

/*suporte dropdown e conta dropdown*/
.header .support .support-dropdown, .header .user-dropdown{
    background-color: #E76522;
    border: 1px solid #0F0F0F;
    border-radius: 5px;
    cursor: auto;
    display: none;
    padding: 20px;
    position: absolute;
    top: 100%;
    z-index: 2;
}
.header .support .support-dropdown{
    width: max-content;
}
.header .user-dropdown{
    width: 240px;
}

/*efeito dropdown support e user*/
.header .support:hover .support-dropdown{
    display: block;
}

.header .user:hover .user-dropdown{
    display: block;
}

/*flechas pra cima support e user*/
.support:hover .support-dropdown .flex::before, .header .user:hover .user-dropdown::before{
    background-color: #E76522;
    border-top: 1px solid #0F0F0F;
    border-left: 1px solid #0F0F0F;
    content: '';
    display: block;
    height: 10px;
    left: 100px;
    position: absolute;
    top: -5px;
    transform: rotate(45deg);
    width: 10px;
}
.header .user:hover .user-dropdown::before{
    left: 170px;
    top: -5px;
}

.support-dropdown .info-support{
    margin-right: 15px;
}

/*Titulo suporte*/
.support-dropdown .title-support{
    font-size: 23px;
    margin-bottom: 10px;
}
.support-dropdown .phone-options, .button-enviar, .header .user-dropdown span, .header .user-dropdown a{
    font-size: 18px;
    text-align: center;
}
.support-dropdown .title-support, .support-dropdown .phone-options, .phone-options a, .header .user-dropdown span, .header .user-dropdown a, .code-track a{
    color: #fff;
}

.code-track .button-enviar, .user .button-enviar{
    background-color: #0F0F0F;
    border-radius: 5px;
    color: #fff;
    display: block;
    font-weight: 700;
    margin-bottom: 10px;
    padding: 10px 0;
    width: 100%;
}
.header .user-dropdown span{
    display: block;
    margin-bottom: 10px;
}
/*Barra de pesquisa*/
.header form.search-box{
    position: relative;
    width: 220px;
}

.header form.search-box .search-txt{
    background: transparent!important;
    border: 0;
    border-bottom: 1px solid #E76522;
    width: 100%;
    height: 30px;
    padding: 0 0 5px 30px;
    font-size: 17px;
    font-style: italic;
}

.header form.search-box .button-search{
    position: absolute;
    height: calc(100% - 3px);
    top: 0;
    left: 0;
    background: transparent;
}

/*Ícone barra de pesquisa*/
.header .search-box svg{
    width: 20px;
    height: 20px;
}

/*flechas dropdown dos ícones*/
.header .support svg.arrow-drop, .header .user .c svg.arrow-drop, .nav ul.submenu li a svg{
    margin-left: 5px;
    width: 12px;
    height: 12px;
}

/*logo funstart*/
.logo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.logo .logo-nome{
    display: none;
}
.logo img{
    max-height: 90px;
}
.logo img:hover{
    opacity: 0.8;
}
/*Fecha estilização do header*/

/*Menu*/
.nav{
    background-color: #fff;
    border-top: 2px solid #0F0F0F;
    border-bottom: 2px solid #0F0F0F;
}

.nav li, .nav .subabertura{
    position: relative;
}

/*titulos dos menus e submenus*/
a.title-menu{
    display: flex;
    height: 50px;
}

a.title-menu, .nav ul.submenu li a{
    font-size: 20px;
    font-weight: 700;
    color: #0F0F0F;
    text-transform: uppercase;
}

.nav ul.submenu li ul.submenu-level-2 li a{
    color: #fff;
}

.nav ul.submenu li a:hover{
    opacity: 0.7;
}

/*icones dos menus*/
img.menu-icon{
    width: 28px;
    margin: auto;
    margin-right: 10px;
}

/*submenu*/
.nav ul ul.submenu{
    background-color: #fff;
    border-top: 2px solid #0F0F0F;
    box-shadow: 0 0 8px #afafaf;
    border-radius: 0 0 10px 10px;
    padding: 20px;
    position: absolute;
    opacity: 0.5;
    transform: rotateX(-60deg);
    transform-origin: top center;
    transition: all 0.2s ease-in;
    visibility: hidden;
    width: max-content;
    z-index: 3;
}

.nav ul li.subabertura ul.submenu{
    left: inherit;
    right: 0;
}
/*efeito dropdown menu*/
.nav ul > li:hover ul.submenu{
    opacity: 1;
    transform: rotateX(0deg);
    transition-timing-function: ease-out;
    visibility: visible;
}

/*Área dos links do submenu*/
.nav ul.submenu .sub-cat{
    margin-right: 0;
    position: relative;
}

/*produto lateral do submenu*/
.submenu .slide-prodt{
    height: 338px;
}

.slide-prodt img{
    border-radius: 10px;
    max-width: 100%;
    max-height: 100%;
}

/*Sub-submenus*/
ul.submenu .sub-cat>li{
    margin-right: 100px;
    margin-bottom: 10px;
    width: 150px;
}

.nav ul.submenu div.sub-cat ul.submenu-level-2{
    background-color: #ff8142;
    border-radius: 10px;
    display: none;
    margin: 5px 0;
    padding: 10px 15px;
}

/*efeito dropdown sub-submenu*/
ul.submenu .sub-cat li:hover ul.submenu-level-2{
    display: block;
}
/*Fecha estilização do menu*/
.banner{
    display: flex;
}
.banner img{
    max-width: 100%;
    max-height: 100%;
}
/*Área inferior do rodapé*/
.banner-bottom{
    background-color: #0F0F0F;
    margin-bottom: 40px;
}

.banner-bottom .line{
    height: 70px;
}

/*ícones banner*/
.banner-bottom svg{
    fill: #E76522;
    margin-right: 15px;
    width: 40px;
}
/*textos banner*/
.banner-bottom span{
    color: #E76522;
    font-size: 18px;
	font-weight: 700;
}
.banner-bottom span.title{
    display: block;
    font-weight: 700;
}

.banner-brand{
    display: flex;
    font-size: 50px;
    justify-content: center;
    width: 48%;
    position: relative;
}
.banner-brand img{
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    transition: 0.4s ease-in-out;
}
.top-margin{
    margin: 35px 0 0 0;
}
.banner-brand a:hover img{
    transform: translateY(-8px);
    box-shadow: 0px 0px 8px rgb(73, 73, 73)
}
/*area dos produtos*/
.area-products{
    margin-top: 35px;
}
/*margem exceção*/
.top-margin-2{
    margin-top: 25px;
}
/*Título de produtos e login*/
h2.title-category, .title-category-side, .product-related-title, .title-login, .title-cart{
    text-align: center;
    font-size: 35px;
    font-weight: 700;
    margin-bottom: 5px;
    position: relative;
}
h2 span.highlight-orange, span.highlight-orange{
    color: #E76522;
}
span.highlight-red{
    color: red;
}
h2.title-category::after, .title-category-side::after, .product-related-title::after{
    background-color: #E76522;
    bottom: -10px;
    content: '';
    display: block;
    height: 5px;
    left: 0;
    position: absolute;
    width: 50%;
}

h2.title-category::before, .title-category-side::before, .product-related-title::before{
    background-color: #0F0F0F;
    bottom: -10px;
    content: '';
    display: block;
    height: 5px;
    right: 0;
    position: absolute;
    width: 50%;
}
/*lista dos produtos*/
ul.showcase{
    display: flex;
    flex-wrap: wrap;
}
/*div externa do produto*/
.list-item{
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 15px;
    width: 25%;
}
/*div interna do produto*/
.list-item-wrap{
    box-shadow: 0px 0px 5px rgb(73, 73, 73);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    padding: 10px 15px;
    position: relative;
    z-index: 10;
}

/*efeito hover caixa interna do produto*/
.list-item > .list-item-wrap:hover{
    margin-bottom: -50px;
    padding-bottom: 60px;
    transition: ease-in-out .2s;
}
/*link do produto*/
.list-item-wrap .product-link{
    bottom: 0;
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 6;
}

/*div imagem do produto*/
.list-item-wrap .image-product{
    display: flex;
    height: 230px;
    position: relative;
}
/*produto*/
.image-product img{
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    padding: 15px;
}
/*Porcentagem do desconto*/
.image-product .off-price, .main-image .off-price{
    background-color: #059600;
    border-radius: 5px;
    color: #fff;
    font-weight: 700;
    padding: 5px;
    position: absolute;
    text-align: center;
    z-index: 5;
}
.image-product .off-price{
    left: 10px;
    top: 10px;
    width: 50px;
}
.main-image .off-price{
    font-size: 19px;
    right: 10px;
    top: 5px;
}
/*info dos produtos*/
.list-item-wrap .info-product{
    display: flex;
    flex-direction: column;
    min-height: 100px;
    text-align: center;
}
/*nome dos produtos*/
.list-item-wrap .name-product{
    color: #0F0F0F;
    display: -webkit-box;
    font-size: 17px;
    overflow: hidden;
    margin-bottom: 10px;
    min-height: 45px;
    text-align: center;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
/*div preço dos produtos*/
.list-item-wrap .price-product{
    display: flex;
    flex-direction: column;
}
/*preço anterior do produto*/
.list-item-wrap .price-second, .product-buy .price-second{
    font-size: 16px;
    margin-right: 5px;
}
.product-buy .price-second{
    font-size: 19px;
}
/*preço principal do produto*/
.list-item-wrap .price-main{
    color: #E76522;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 8px;
}
/*juros produto*/
.list-item-wrap .juros, .product-buy .juros{
    display: block;
    font-size: 15px;
    margin-top: 8px;
}
.product-buy .juros{
    font-size: 18px;
}
/*div caixa de compra*/
.list-item-wrap .box-button{
    bottom: 10px;
    left: 0;
    position: absolute;
    padding: 0 20px;
    opacity: 0;
    transition: 0.2s ease-in;
    visibility: hidden;
    width: 100%;
    z-index: 7;
}
/*efeito hover caixa*/
.list-item-wrap:hover .box-button{
    opacity: 1;
    transition: 0.2s ease-out;
    visibility: visible;
}
.box-button .button{
    background-color: #E76522;
    border-radius: 5px;
    color: #fff;
    display: block;
    font-weight: 700;
    padding: 10px 0;
    text-align: center;
    transition: 0.3s ease-in;
    width: 100%;
}
/*efeito hover botao*/
.box-button:hover .button{
    background-color: #0F0F0F;
    transition: 0.3s ease-in-out;
}

/*Página de categorias - layout da parte de conteúdos*/
/*Níveis de paginação*/
ul.lista-crumb{
    align-items: center;
    display: flex;
    margin-bottom: 25px;
    margin-top: 20px;
}
/*setas guia de navegação e categoria*/
ul.lista-crumb svg, .sidebar-category svg{
    fill: #838383;
    margin-right: 10px;
    width: 7px;
}
.sidebar-category svg{
    fill: #0F0F0F;
}
/*link guia de navegação*/
ul.lista-crumb li a{
    padding-right: 10px;
}
/*palavra destaque guia de navegação*/
ul.lista-crumb a, ul.lista-crumb li strong{
    color: #838383;
    font-size: 18px;
}
/*Banner categoria*/
.banner-side{
    display: flex;
    margin-bottom: 30px;
    width: 100%;
}
.banner-side img{
    max-width: 100%;
    max-height: 100%;
}
/*Div do catálogo*/
.catalog{
    display: flex;
}
/*titulo do catálogo*/
.catalog-title{
    color: #E76522;
    font-size: 35px;
    font-weight: 700;
}

/*menu lateral*/
.sidebar-category{
    background-color: #E76522;
    border: 2px solid #0F0F0F;
    height: fit-content;
    margin-right: 20px;
    padding: 15px;
    width: 270px;
}
/*titulos e subtitulos da barra lateral*/
.sidebar-title, .subtitle-category{
    display: block;
    font-size: 20px;
    font-weight: 700;
}
/*alinhar titulo*/
.sidebar-title{
    text-align: center;
}
/*margem direita dos subtitulos do menu lateral*/
.subtitle-category{
    margin-right: 10px;
}
.subtitulo{
    display: flex;
}
.sidebar-category a{
    color: #0F0F0F;
}
.highlight-white{
	color: #fff;	
}
.sidebar-category a:hover{
    color: #fff;
}
.sidebar-category ul:not(:last-child){
    margin-bottom: 20px;
}
/*tamanho dos itens da lista do menu lateral*/
.sidebar-category ul li{
    font-size: 19px;
}
/*area lateral dos produtos*/
.side-products{
    width: calc(100% - 270px);
}
/*titulo da categoria dos produtos*/
.title-category-side{
    text-align: left;
    width: 100%;
}
/*largura dos produtos da categoria*/
.side-products .list-item{
    width: 33%;
}

/*Página individual de produtos - layout da parte de conteúdos*/
.product-section{
    display: flex;
    margin-bottom: 50px;
}
/*div geral da área de imagens do produto*/
.images-area{
    margin-right: 30px;
}
.product-detail{
    display: flex;
    flex-direction: column;
    width: 100%;
}
/*div da imagem principal do produto*/
.main-image{
    position: relative;
    border: 2px solid #0F0F0F;
	border-radius: 10px;
    display: flex;
    height: 400px;
    margin-bottom: 20px;
    padding: 30px;
    overflow: hidden;
    width: 700px;
}
/*imagem principal visualizada*/
.main-image img{
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}
/*div geral das imagens secundárias*/
.small-images{
    display: flex;
    justify-content: center;
}
/*div da caixa pequena das imagens*/
.small-image-box{
    border: 1px solid #0F0F0F;
    border-radius: 5px;
    display: flex;
    height: 120px;
    margin-right: 25px;
    overflow: hidden;
    width: 120px;
}
.small-image-box img{
    cursor: pointer;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    opacity: 0.6;
}
/*efeito hover opacidade da imagem*/
.small-image-box img:hover{
    opacity: 1;
}

/*titulo nome do produto*/
.product-title{
    font-size: 25px;
    position: relative;
}
.product-title::after{
    background-color: #E76522;
    bottom: -10px;
    content: '';
    display: block;
    height: 5px;
    left: 0;
    position: absolute;
    width: 100%;
}
.product-buy{
    margin: 30px 0 50px 0;
    position: relative;
}
.product-buy::after{
    content: '';
    background-color: #0F0F0F;
    bottom: -25px;
    content: '';
    display: block;
    height: 5px;
    left: 0;
    position: absolute;
    width: 100%;
}
.product-buy .flex-buy{
    display: flex;
    margin-top: 25px;
}
.product-detail .flex-buy .box-button{
    margin-right: 10px;
    width: calc(98% - 100px);
}
.flex-buy select{
    background-color: #0F0F0F;
    border-radius: 5px;
    color: #E76522;
    font-size: 20px;
    text-align: center;
    font-weight: 700;
    width: 100px;
}
.product-detail .box-button a{
    font-size: 23px;
}
.price-buy{
    font-size: 35px;
    font-weight: 700;
    color: #E76522;
}
/*frete gratis*/
.product-detail .free-shipping{
    background-color: #E76522;
    border: 2px solid #0F0F0F;
    border-radius: 5px;
    display: flex;
    margin-top: 20px;
    padding: 10px;
    width: 100%;
}
.frete svg{
    margin-right: 60px;
    width: 35px;
}
.product-detail .free-shipping .text-shipping{
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}
.frete{
    display: flex;
}
.frete svg{
    margin-right: 20px;
}
.frete label.frete-text{
    display: block;
    font-size: 20px;
    margin-right: 30px;
}
.frete input{
    font-size: 18px;
    padding: 5px;
    width: 200px;
}
.frete-form{
    display: flex;
}
.frete-form button{
    background-color: #0F0F0F;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    padding: 10px;
}
/*descrição do produto*/

.title-description, .title-description-ticket{
    color: #E76522;
    font-size: 30px;
    font-weight: 700;
    position: relative;
}
.title-description::after{
    background-color: #E76522;
    bottom: -10px;
    content: '';
    display: block;
    height: 5px;
    left: 0;
    position: absolute;
    width: 100%;
}
.info-description{
    margin: 30px 0 50px 0;
}
.subtitle-description, .p-description{
    margin: 10px 0 10px 0;
    text-align: justify;
}
.subtitle-description{
    font-size: 21px;
}
.p-description{
    font-size: 18px;
}

/*página sobre nós*/
.about-flex{
    display: flex;
    margin-bottom: 30px;
}
.about-description img{
    margin-right: 20px;
    width: 80px;
}
/*Layout - página de login e de cadastro*/
/*estilização do agrupador de campo*/
fieldset.form-group-login, fieldset.form-group-cadastro, .support-flex fieldset, fieldset.form-buy{
    border: 2px solid #0F0F0F;
    background: #E76522 url(../imgs/logoblack2.png) no-repeat center;
    background-size: contain;
    margin: 20px auto;
    padding: 15px;
    position: relative;
}
fieldset.form-group-login, fieldset.form-buy{
    width: 500px;
}
fieldset.form-group-cadastro{
    width: 1000px;
}
fieldset .cadastro-flex, fieldset .form-buy-flex{
    display: flex;
    justify-content: space-around;
}
fieldset .cadastro-child, fieldset .form-buy-child{
    width: 43%;
}
/*estilização do titulo de cada area de campo*/
fieldset .fieldset-title, .fieldset-title-2{
    color: #fff;
    font-size: 27px;
    font-weight: 700;
    position: relative;
}
.fieldset-title-2{
    text-align: center;
}
/*linha branca abaixo do título*/
fieldset .fieldset-title::after, .modal-title::after{
    content: '';
    background-color: #fff;
    display: block;
    height: 3px;
    position: absolute;
    bottom: -7px;
    width: 100%;
}
/*margem de cada div dos campos*/
fieldset .controls, .controls-second{
    position: relative;
    margin: 13px 0 13px 0;
}
.controls-second{
    text-align: center;
}
.controls #btn-password{
    background: transparent;
    cursor: pointer;
    opacity: 0.4;
    position: absolute;
    right: 15px;
    top: 40px;
    width: 28px;
}
/*estilização dos textos que vêm antes dos campos*/
fieldset.form-group-login label, fieldset.form-group-cadastro label, .support-flex fieldset label, .form-buy label{
    font-size: 20px;
    color: #fff;
    display: block;
    margin-bottom: 10px;
    max-width: fit-content;
}
/*estilização dos campos*/
fieldset.form-group-login input, fieldset.form-group-cadastro input, fieldset.form-group-cadastro select, .support-flex fieldset input, .support-flex textarea, fieldset.form-buy input, fieldset.form-buy select, .area-ticket input{
    border: 1px solid #0F0F0F;
    border-radius: 5px;
    font-size: 18px;
    padding: 5px;
    transition: 0.3s ease-in-out;
    width: 100%;
}
fieldset select.input-50{
    width: 50%;
}
fieldset input.input-40{
    width: 40%;
}
fieldset input.input-30{
    width: 30%;
}
fieldset input.input-20{
    width: 20%;
}
/*Estilização da div dos botões de limpar e enviar*/
.form-button{
    display: flex;
    justify-content: space-evenly;
    margin: 0 auto;
    width: 500px;
}
/*botao enviar do login e de cadastro*/
fieldset.form-group-login input[type="submit"], fieldset.form-group-cadastro input[type="submit"], fieldset.form-group-cadastro input[type="reset"], .support-flex fieldset input[type="submit"], fieldset.form-buy input[type="submit"], .area-ticket input[type="submit"]{
    cursor: pointer;
    background-color: #0F0F0F;
    color: #fff;
    font-weight: 700;
    width: 200px;
}
fieldset.form-group-login input[type="submit"], fieldset.form-buy input[type="submit"], .area-ticket input[type="submit"]{
    left: 50%;
    position: relative;
    transform: translateX(-50%);
}
fieldset.form-group-login input:focus, fieldset.form-group-cadastro input:focus, .support-flex fieldset input:focus, textarea:focus, .form-buy input:focus{
    background-color: #cacaca;
}
fieldset.form-group-login input[type="submit"]:focus, fieldset.form-group-cadastro input:focus[type="submit"], fieldset.form-group-cadastro input:focus[type="reset"], .support-flex fieldset input[type="submit"]{
    background-color: #0F0F0F;
}
fieldset.form-group-cadastro input[type="checkbox"]{
    width: 14px;
    height: 14px;
}
fieldset.form-group-cadastro input[type="radio"]{
    margin-top: 15px;
    display: block;
}
span.form-text, div.form-text{
    color: #fff;
    font-size: 19px;
    margin-left: 5px;
}
div.form-text{
    margin: 10px auto;
    text-align: center;
    width: 700px;
}
div.form-text a{
    color: #fff;
    text-decoration: underline;
}
/*texto inferior da página*/
.subtitle-login, .subtitle-support, .subtitle-cart{
    font-size: 18px;
    text-align: center;
}
.subtitle-support{
    text-align: left;
}
.subtitle-login a, .subtitle-cart a{
    color: #E76522;
    text-decoration: underline;
}
.image-cadastro{
    text-align: center;
    margin: 0 auto;
}
.image-cadastro img{
    width: 200px;
}
/*Layout - fale conosco*/
.support-flex{
    display: flex;
    margin: 30px 0 0 0;
}
.support-child{
    width: 50%;
}
.support-child:not(:last-child){
    margin-right: 30px;
}
.support-child:last-child{
    padding-left: 30px;
}
.title-support-form{
    color: #E76522;
    font-size: 25px;
    font-weight: 700;
    margin: 0 0 10px 0;
}
.subtitle-support a{
    color: #0F0F0F;
}
.cart-img{
    margin: 0 auto;
    width: 200px;
}
.cart-img svg{
    max-width: 100%;
}

/*Janela modal*/
.modal-container{
    align-items: center;
    background-color: rgba(0,0,0,0.5);
    display: none;
    height: 100vh;
    justify-content: center;
    position: fixed;
    width: 100vw;
    top: 0;
    z-index: 2000;
}
.modal-container.mostrar{
    display: flex;
}
.modal{
    background: #E76522;
    border: 2px solid #0F0F0F;
    padding: 15px;
    position: relative;
    width: 600px;
}
.modal-title{
    color: #fff;
    display: block;
    font-size: 27px;
    font-weight: 700;
    position: relative;
    text-align: center;
}
.modal-subtitle{
    color: #fff;
    display: block;
    font-size: 20px;
    margin-top: 10px;
    text-align: center;
}
.pay-flex{
    display: flex;
    justify-content: space-evenly;
    margin-top: 10px;
}
.pay-child{
    background-color: #0F0F0F;
    border-radius: 5px;
    cursor: pointer;
    padding: 5px;
    position: relative;
    transition: 0.2s ease-in-out;
    text-align: center;
    width: 150px;
}
.pay-child a{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
}
.pay-child span{
    color: #E76522;
    display: block;
    font-weight: 700;
}
.pay-child svg{
    fill: #E76522;
    height: 60px;
}
.pay-child:hover{
    background-color: #2b2b2b;
}
.fechar{
    background-color: #0F0F0F;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    height: 40px;
    font-size: 20px;
    font-weight: 700;
    position: absolute;
    top: -10px;
    right: -10px;
    width: 40px;
}
/*Finalizar compra cartão*/
.parent-flex-form-buy{
    display: flex;
}
.child-flex-form-buy{
    margin-right: 30px;
    width: 100px;
}

@keyframes modal{
    from{
        opacity: 0;
        transform: translate3d(0, -60px, 0);
    }
    to{
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.mostrar .modal{
    animation: modal 0.3s;
}
/*boleto layout*/
.area-ticket{
    margin: 20px auto;
    width: 700px;
}
li.ticket-buy-list-item{
    font-size: 20px;
    list-style: disc inside;
    margin: 15px 0;
    text-align: justify;
}
/*Rodapé*/
/*Fundo do rodapé*/
.footer{
    background: #0F0F0F url(../imgs/rodape/rodapefundo.png) no-repeat center;
    background-size: cover;
    margin-top: 50px;
}

/*Registrar e-mail*/
.footer .footer-newsletter{
    background-color: #E76522;
}
/*linha de altura do footer-newsletter*/
.footer-newsletter-line{
    height: 80px;
}
/*icone do logo alternativo*/
.footer-newsletter svg{
    margin-right: 15px;
    width: 73px;
}
/*texto do footer-newsletter*/
.footer-newsletter .text{
    color: #fff;
    text-align: center;
}

.footer-newsletter .text .a{
    font-size: 25px;
    font-weight: 700;
}

.footer-newsletter .text .b{
    font-size: 20px;
}

.footer-newsletter form input[type="email"]{
    height: 35px;
    width: 400px;
}
/*botao de enviar do footer-newsletter*/
.footer-newsletter form button{
    background-color: #0F0F0F;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    padding: 0px 15px;
}

/*Títulos dos conteúdos do rodapé*/
.footer h3.footer-title{
    color: #E76522;
    font-size: 20px;
    margin-top: 25px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/*Conteúdos dos rodapés*/
.footer .footer-content{
    color: white;
    font-size: 17px;
    margin-bottom: 20px;
}

.footer-content:last-child{
    margin-bottom: 40px;
}

/*Links do rodapé*/
.footer li.footer-content a{
    color: #fff;
}

.footer li.footer-content a:hover{
    text-decoration: underline;
}
/*Redes sociais*/
a.social-media{
    align-items: center;
    color: #fff;
    display: flex;
    margin-bottom: 10px;
}

/*Fundo dos icones*/
.footer .social-media .circle{
    background-color: #E76522;
    display: block;
    border-radius: 50%;
    height: 30px;
    margin: 0 10px 0 0;
    padding-top: 2px;
    text-align: center;
    width: 30px;
}

.footer .icone{
    color: #0F0F0F;
    display: inline-block;
    height: 23px;
    vertical-align: middle;
    width: 23px;
}

.footer a.social-media:hover .circle{
    background-color: #fff;
    transition: ease-in-out 0.3s;
}

.first-social::after{
    content: 'Facebook';
}

.second-social::after{
    content: 'Instagram';
}
/*Rodapé inferior*/
.footer-bottom{
    border-top: 2px solid #E76522;
    padding-top: 20px;
}

/*métodos de pagamento*/
.footer ul.pay-meth{
    display: flex;
    flex-wrap: wrap;
    max-width: 280px;
}

.footer ul.pay-meth li{
    margin-right: 4px;
}

.footer ul.pay-meth li:not(:last-child){
    margin-bottom: 5px;
}

/*Site seguro*/
.footer li.footer-content img.safe-site{
    width: 200px;
    border-radius: 5px;
}

/*Área logo da desenvolvedora*/
.footer .dev{
    display: flex;
}
.footer .dev span{
    margin-right: 10px;
    color: white;
}
.footer .dev img{
    max-height: 32px;
    margin-top: -5px;
    margin-bottom: 10px;
}
/*Fecha estilização do rodapé*/