/* =====================================
Template Name: Arena Computadores
Author Name: Arena Computadores
Author URI: http://www.wpthemesgrid.com/
Description: Arena Computadores - eCommerce HTML5 Template.
Version:1.0
========================================*/
/*======================================
[ CSS Table of contents ]
01. Preloader CSS
02. Header CSS
	+ Logo
	+ Category Menu
	+ Main Menu
03. Hero Area CSS
04. Small Banner CSS
05. Medium Banner CSS
06. Single Product CSS
07. Shop Sidebar CSS
08. Shop Single CSS
09. Shop Home List CSS
10. Cart CSS
11. Checkout CSS
12. Login & Register CSS
13. Cowndown CSS
14. Shop Services CSS
15. Newslatter CSS
16. About Us CSS
17. Team CSS
18. Blog CSS	
	+ Blog Archive
	+ Blog Sidebar
	+ Blog Single
19. Contact CSS
20. 404 Error CSS
21. Footer CSS
========================================*/


.color-plate {
	position: fixed;
	display: block;
	z-index: 99998;
	padding: 20px;
	width: 245px;
	background: #fff;
	right: -245px;
	text-align: left;
	top: 30%;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	transition:all 0.4s ease;
	-webkit-box-shadow: -3px 0px 25px -2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: -3px 0px 25px -2px rgba(0, 0, 0, 0.2);
	box-shadow: -3px 0px 25px -2px rgba(0, 0, 0, 0.2);
}
.color-plate.active{
	right:0;
}
.color-plate .color-plate-icon {
	position: absolute;
	left: -48px;
	width: 48px;
	height: 45px;
	line-height: 45px;
	font-size: 21px;
	border-radius: 5px 0 0 5px;
	background: #fff;
	text-align: center;
	color: #333;
	top: 0;
	cursor: pointer;
	box-shadow: -4px 0px 5px #00000036;
}
.color-plate h4 {
	display: block;
	font-size: 15px;
	margin-bottom: 5px;
	font-weight: 500;
}
.color-plate p {
	font-size: 13px;
	margin-bottom: 15px;
	line-height: 20px;
}
.color-plate span {
	width: 42px;
	height: 35px;
	border-radius: 0;
	cursor: pointer;
	display: inline-block;
	margin-right: 3px;
}
.color-plate span:hover{
	cursor:pointer;
}
.color-plate span.color1{
	background:#EE0B16;
}
.color-plate span.color2{
	background:#0088CC;
}
.color-plate span.color3{
	background:#32B87D;
}
.color-plate span.color4{
	background:#FE754A;
}
.color-plate span.color5{
	background:#F82F56;
}
.color-plate span.color6{
	background:#00cec9;
}
.color-plate span.color7{
	background:#6c5ce7;
}
.color-plate span.color8{
	background:#85BA46;
}
.color-plate span.color9{
	background:#fd79a8;
}
.color-plate span.color10{
	background:#a29bfe;
}
.color-plate span.color11{
	background:#badc58;
}
.color-plate span.color12{
	background:#FF1D38;
}

/* Preloader */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999999;
  width: 100%;
  height: 100%;
  background-color: #e7e7e7;
  overflow: hidden;
}
.preloader-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.preloader-gif {
  width: 120px;    /* ajuste como quiser */
  height: auto;
  animation: fadeIn 0.3s ease-in-out;
}

/* Preloader continua com fundo branco e centralizado */

.preloader-icon span:last-child {
  animation-delay: -0.8s;
  -webkit-animation-delay: -0.8s;
}
@keyframes preloader-fx {
  0% {transform: scale(0, 0); opacity:0.5;}
  100% {transform: scale(1, 1); opacity:0;}
}
@-webkit-keyframes preloader-fx {
  0% {-webkit-transform: scale(0, 0); opacity:0.5;}
  100% {-webkit-transform: scale(1, 1); opacity:0;}
}
/* End Preloader */
.btn {
	position: relative;
	font-weight: 500;
	font-size:14px;
	color: #fff;
	background: #333;
	display: inline-block;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	transition: all 0.4s ease;
	z-index: 5;
	display: inline-block;
	padding: 13px 32px;
	border-radius: 0px;
	text-transform:uppercase;
}
.btn:hover{
	color:#fff;
	background:#EE0B16;
}

element.style {
}
.btn {
    position: relative;
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    background: #333;
    display: inline-block;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    z-index: 5;
    display: inline-block;
    padding: 13px 32px;
    border-radius: 0px;
    text-transform: uppercase;
}

#scrollUp {
	left: 10px;
	z-index: 33;
	bottom: 10px;
	text-align: center;
}
#scrollUp i{
	height: 40px;
    width: 40px;
    line-height: 40px;
	background:transparent;
    background:#222;
    border-radius: 0;
	font-size: 18px;
	-webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    transition: all 500ms ease;
	display:block;
	color: #fff;
	box-shadow: 0px 4px 19px #00000038;
}
#scrollUp i:hover{
	background:#EE0B16;
	color:#fff;
}



/*======================================
   Start Shop List CSS
========================================*/
.shop-list .list-content{
	margin-top:50px;
}
.shop-list .list-content .product-price{}
.shop-list .list-content .product-price span {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 3px;
	display: block;
}
.shop-list .list-content .title {
	line-height: 20px;
}
.shop-list .list-content .title a:hover{
	color:#EE0B16;
}
.shop-list .list-content .title a {
	font-size: 18px;
	font-weight: 600;
}
.shop-list .list-content .rating {
	margin: 5px 0 8px 0;
}
.shop-list .list-content .rating li{
	display:inline-block;
}
.shop-list .list-content .rating li i{
	color: #EE0B16;
}
.shop-list .list-content .rating li.total {
	color: #333;
	font-size: 12px;
	margin-left: 3px;
}
.shop-list .list-content .des{}
.shop-list .list-content .btn {
	margin-top: 22px;
	height: 42px;
	line-height: 15px;
	color: #333;
	background: transparent;
	border: 1px solid #cecece;
	font-size: 13px;
	border-radius: 30px;
	height: auto;
	line-height: a;
	padding: 13px 32px;
}
.shop-list .list-content .btn:hover{
	background:#EE0B16;
	color:#fff;
	border-color:transparent;
}
/* Pagination CSS */
.pagination {
	text-align: left;
	margin: 50px 0 0 0;

}
.pagination.center {
	text-align: center;
}
.pagination .pagination-list li {
	margin-right: 5px;
	display: inline-block;
}
.pagination .pagination-list li:last-child{
	margin-right:0px;
}
.pagination .pagination-list li a {
	background: #F6F7FB;
	color: #666;
	padding: 6px 18px;
	font-weight: 400;
	border: 1px solid #e1e1e1;
	font-size: 16px;
	border-radius: 0px;
}
.pagination .pagination-list li.active a,
.pagination .pagination-list li:hover a{
	background: #EE0B16;
	color: #fff;
	border-color: transparent;
}
.pagination .pagination-list li a i{
	font-size:13px;
}
.pagination .pagination-list li a i{}
.blog-grids.pagination{
	margin-top:50px;
	text-align:center;
}
/*======================================
   End Shop List CSS
========================================*/

/*=============================
	Start Cowndown CSS
===============================*/
.cown-down {
	position: relative;
	height: 515px;
	overflow:hidden;
}
.cown-down .padding-right{
	padding-right:0;
}
.cown-down .padding-left{
	padding-left:0;
}
.cown-down .image img {
	width:100%;
	height:100%;
}
.cown-down .content {
	text-align: center;
	background: #FDFBEF;
	height: 100%;
	position:relative;
}
.cown-down .content .heading-block{
	position:absolute;
	left:0;
	top:26%;
	transform:translateY(-50%);
	padding: 75px;
}
.cown-down .content .small-title {
	font-size: 13px;
	color: #777;
	display: block;
	text-transform: uppercase;
	margin-bottom: 5px;
	font-weight: 600;
}
.cown-down .content .title {
	font-size: 25px;
	font-weight: 600;
	margin-bottom: 20px;
	text-transform: capitalize;
}
.cown-down .content .price {
	margin-top: 35px;
	font-size: 35px;
	font-weight: 700;
	color: #EE0B16;
}
.cown-down .content .price s{
	margin-top: 35px;
	font-size: 24px;
	font-weight: 500;
	color:#666;
}
.cown-down .content .cdown {
	float: none;
	text-align:center;
	margin-top:40px;
	width: 80px;
	display:inline-block;
	
}
.cown-down .content .cdown {
	text-align: center;
}
.cown-down .content .cdown{
	display:inline-block;
}
.cown-down .content .cdown span {
	color: #333;
	font-size: 22px;
	font-weight:400;
	text-transform:uppercase;
}
.cown-down .content .cdown p{
	font-size:13px;
	color:#666;
	text-transform:uppercase;
}
/*=============================
	End Cowndown CSS
===============================*/

/*======================================
   Start Shop Services CSS
========================================*/
.shop-services.section {
	padding: 80px 0 0px 0;
	background: #fff;
}
.shop-services.home{
	padding:60px 0;
	background:#F6F7FB;
}
.shop-services .single-service {
	position: relative;
	padding-left: 65px;
}
.shop-services .single-service i {
	height: 50px;
	width: 50px;
	line-height: 50px;
	text-align: center;
	color: #333;
	background: transparent;
	border-radius: 100%;
	display: block;
	font-size: 32px;
	position: absolute;
	left: 0;
	top: 0;
}
.shop-services .single-service h4 {
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 22px;
	color: #333;
}
.shop-services .single-service p {
	color: #898989;
	line-height: 28px;
	font-size:14px;
}
/*======================================
   End Shop Services CSS
========================================*/

/*======================================
   Start Shop Newsletter CSS
========================================*/
.shop-newsletter{
	background:#fff;
}
.shop-newsletter .inner{
	text-align:center;
}
.shop-newsletter .inner h4 {
	color: #333;
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 5px;
	text-transform: uppercase;
}
.shop-newsletter .inner p{
	color:#777;
	font-size:14px;
	font-weight:400;
	margin-bottom:30px;
}
.shop-newsletter .inner p span{
	color:#EE0B16;
}
.shop-newsletter .newsletter-inner{
	position:relative;
	display: inline-block;
}
.shop-newsletter .newsletter-inner input {
	width: 480px;
	height: 55px;
	border-radius: 0px;
	padding: 0px 30px;
	font-weight: 400;
	display: inline-block;
	text-shadow: none;
	box-shadow: none;
	border-radius: 0;
	border: none;
	border: 1px solid #ececec;
	border-radius: 30px 0 0 30px;
}
.shop-newsletter .newsletter-inner button{
	border:none;
	text-shadow:none;
	box-shadow:none;
	border-radius:0;
}
.shop-newsletter .newsletter-inner .btn {
	display: inline-block;
	height: 55px;
	padding: 10px 30px;
	position: relative;
	top: 0;
	background: #EE0B16;
	color: #fff;
	left: -4px;
	border-radius: 0 30px 30px 0;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
}
.shop-newsletter .newsletter-inner .btn:hover{
	background:#333;
	color:#fff;
}
/*======================================
   End Shop Newsletter CSS
========================================*/

/* Mail Success */
.mail-success .mail-inner {
	text-align: center;
	background: #fff;
	padding: 0px 30px;
}
.mail-success .mail-inner h2 {
	margin-bottom: 10px;
	display: block;
	font-weight: 600;
	color: #EE0B16;
	text-transform: uppercase;
	font-size: 30px;
}
.mail-success .mail-inner p {
	font-size: 14;
	color: #333;
	margin-bottom: 30px;
	line-height: 22px;
}
.mail-success .mail-inner .btn {
	color: #fff;
	padding: 10px 30px;
}
.mail-success .mail-inner .btn i{
	margin-right:5px;
}


/*=============================
	20. Start Footer CSS
===============================*/
.footer{
	background:#222;
}
.footer .about {
	padding-right: 50px;
}
.footer .single-footer h4 {
	font-size: 17px;
	font-weight: 600;
	color: #fff;
	text-transform: capitalize;
	margin-bottom: 30px;
}
.footer .about .logo{
	margin-bottom:20px;
}
.footer .about .logo img{}
.footer .about .text{
	color:#fff;
	font-weight: 400;
}
.footer .about .call {
	color: #fff;
	margin-top: 15px;
	font-weight: 400;
}
.footer .about .call span{
	display: block;
}
.footer .about .call a {
	color: #EE0B16;
	font-size: 20px;
	font-weight: 600;
}
.footer .links ul{}
.footer .links ul li {
	display: block;
	margin-bottom: 8px;
}
.footer .links ul li:last-child{
	margin-bottom:0;
}
.footer .links ul li a{
	color:#fff;
	font-weight: 400;
}
.footer .links ul li a:hover{
	color:#EE0B16;
	padding-left:10px;
}
.footer .social{}
.footer .social .contact{}
.footer .social .contact ul{}
.footer .social .contact ul li {
	color: #fff;
	display: block;
	margin-bottom: 4px;
	font-weight: 400;
}
.footer .contact ul li:last-child{
	margin-bottom:0;
}
.footer .social ul {
	margin-top: 20px;
}
.footer .social ul li{
	display:inline-block;
	margin-right:25px;
}
.footer .social ul li:last-child{
	margin-right:0;
}
.footer .social ul li a{
	color:#fff;
	display:block;
	font-size:16px;
}
.footer .social ul li a:hover{
	color:#EE0B16;
}
/* Copyright */
.footer .copyright{
	
}
.footer .copyright .inner{
	border-top:1px solid #eeeeee3d;
	padding:20px 0;
}
.footer .copyright .left{}
.footer .copyright .right{
	float:right;
}
.footer .copyright p{
	color:#fff;
}
.footer .copyright p a{
	color:#fff;
	text-decoration:underline;
}
/*=============================
	End Footer CSS
===============================*/

.propaganda {
    display: flex;
    justify-content: center; /* centraliza horizontalmente */
    align-items: center;     /* centraliza verticalmente (se tiver altura) */
}

.propaganda .home-propaganda {
    width: auto;
    max-width: 100%; /* evita quebrar em telas pequenas */
}

.propaganda .home-propaganda img {
    width: auto;          /* mantém o tamanho original da imagem */
    max-width: 100%;      /* só reduz se for maior que a tela */
    height: auto;         /* mantém proporção */
    border-radius: 10px;  /* opcional */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* opcional, pra destacar */
}
@media (max-width: 1200px) {
.preloader-gif {
  width: 820px;    /* ajuste como quiser */
  height: auto;
  animation: fadeIn 0.3s ease-in-out;
}
}