/*
Theme Name: OKanalete

Description: Tema desenvolvido pela Visana Comunicação para o site OKanalete.com
Author: Visana Comunicação
Author URI: http://visanacomunicacao.com.br
Version: 1.0
*/

/* GLOBAL STYLES
-------------------------------------------------- */

@font-face {
    font-family: 'harabararegular';
	src: local('Harabara'),
		 local('Harabara Regular');
	src: url('fonts/harabara-webfont.svg#harabararegular') format('svg'),
		 url('fonts/harabara-webfont.woff') format('woff'),
		 url('fonts/harabara-webfont.ttf') format('truetype'),
		 url('fonts/harabara-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/harabara-webfont.eot');  
    font-weight: normal;
    font-style: normal;
}

body {
  padding-bottom: 0;
  font-family:Verdana, Geneva, sans-serif Harabara;
  font-size:11px;
  color:#666;
}

img {max-width: 100%; height: auto;}

a { 
transition:opacity 0.5s, opacity 0.5s;
-webkit-transition:color 0.5s, color 0.5s, -webkit-transform 0.5s; transition:color 0.5s, color 0.5s;
-webkit-transition:color 0.5s, color 0.5s, -webkit-transform 0.5s; }
a:hover { opacity:1; filter:alpha(opacity=100);  text-decoration:none }

h1,h2 { font-family:'harabararegular', Verdana; letter-spacing:0.03em; font-size:24px; }
h2 { font-size:20px} h3 { font-size:16px }
h3 { font-size:13px; font-weight:bold }
h4 { font-size:12px; font-weight:bold }

.azul { color:#0070A4 }
.laranja { color:#F5911D; }

a.leiamais { background-image: url(img/marcador.png); background-position:center left; background-repeat:no-repeat; padding-left:10px; color:#666}
a.leiamais:hover { color:#333 }


/* Header
-------------------------------------------------- */

#header {
	background-image:url(img/bg_topo.jpg); background-position:top; background-repeat:repeat-x;
	height:156px;
}

#header .container { background-image:url(img/piramide.png); background-position:right 5px; background-repeat:no-repeat;  height:156px; }
	.logo { padding:20px 0px 24px; display:block;}

.header-contacts { margin-top:40px; font-family:'harabararegular', Verdana; font-size:16px; font-weight:normal; text-align:center; letter-spacing: 0.05em;  }
.header-contacts .fone, .header-contacts .mail, .header-contacts .wpp { background-image:url(img/fone.png); background-repeat:no-repeat; background-position:left center; padding-left:30px; height:26px; display:inline-block; color:#F4911D; margin-right:80px; }
.header-contacts .mail { background-image:url(img/mail.png); color:#3F92B9; }
.header-contacts .wpp {color:#3F92B9; background-image:url(http://okanaletetelhas.com.br/wp-content/uploads/2018/11/iconfinder_whatsapp_287520.png); margin-top: 5px;}


#searchform { margin-top:22px; }
#searchform label { color:#FFF;  text-transform:uppercase; margin-right:5px; padding-top:2px; }
#searchform input[type="search"] { border:none; width:460px; }
#searchform input[type="submit"] { width:32px; height:32px; background:none; background-image:url(img/search.png); border:none; opacity:0.9; filter:alpha(opacity=80); transition:opacity 0.8s, opacity 0.5s; }
#searchform input[type="submit"]:hover { opacity:1; filter:alpha(opacity=100); }

/* Menu
-------------------------------------------------- */

.navbar-wrapper {
	background-image:url(img/bg_menu.jpg); background-position:top; background-repeat:repeat-x;
	height:54px;
	margin-bottom:15px; margin-top:0;
}

.navbar-collapse {
    margin-top: 1px; padding:0;
}

.nav > li > a {
	color:#fff;
	font-size:13px; font-weight:bold;
	padding-left:2px; padding-top:5px; margin-right:15px;
	letter-spacing:-0.025em; text-align:left;
	opacity:0.9; filter:alpha(opacity=90);
}

.nav > li > a:hover, .nav > li > a:focus {
	background-color: transparent !important;
	opacity:1; filter:alpha(opacity=100);
}

.navbar-toggle { color:#FFF !important; font-family:Verdana, Geneva, sans-serif !important; font-weight:bold !important; }




/* Menu Categorias
-------------------------------------------------- */

.listcat { margin:0; padding:0; list-style:none; }
.listcat li { margin:0; margin-bottom:2px; border-left:8px solid #CCC; background-color:#F0F0F0; }
.listcat li:hover { border-left:8px solid #F5911D !important;  }

.listcat li a { color:#666; width:100%; display:block; padding:10px; padding-left:18px; margin-left:-8px; text-transform:uppercase; }
.listcat li a:hover { color:#000 }



/*  */

.breadcrumb {
    background-color:transparent;
    border-radius:0;
    list-style: none outside none;
    margin-bottom: 20px;
    padding:0 ;
	border-bottom:1px solid #CCC;
}

/* CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 10px;
  border:12px solid #F0F0F0;

  /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
  width:400px;
  text-align: left;
  right:auto;
  left:12px;
  bottom:12px;
  padding:10px;
  background-color:rgba(0,0,0,0.6);
	-moz-border-radius: 5px;
	-webkit-border-radius:5px;
	border-radius:5px;

}

.carousel-caption h2 { margin:5px 0; }

/* Declare heights because of positioning of img element */
.carousel .item {
  background-color: #ccc;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 370px;
}

.carousel-indicators {
    bottom: 0 !important;
    list-style: none outside none;
    margin-bottom: -1px;
    margin-left: 0;
    padding-left: 0;
    position: absolute;
    right: 0px;
    text-align: center;
    width: 155px;
    z-index: 15;
	left:auto; right:10px;
}
.carousel-indicators .active {
    background-color: #FFFFFF;
	height:35px; padding-top:7px;
	width:30px;
    margin: 0; margin-right:1px; margin-top:-5px;
	color:#F5911D;

}
.carousel-indicators li {
    border:none; background-color:#FFF;
    border-radius: 0;
    cursor: pointer;
    display:block;
	height:30px; padding-top:2px;
	width:30px;
    margin: 0; margin-right:1px; 
    text-indent: 0px;
	float:left;
	font-family:'harabararegular', Verdana; font-size:18px;
	color:#0070A4;
	
}

/* Principal
-------------------------------------------------- */

.produtos, .colunas-dicas, .dicas-interna, .buscaresult { list-style:none; margin:0; padding:0; overflow:hidden; }
.produtos li, .colunas-dicas li { 
	background-color: #FCFCFC;
    border: medium none;
    clear: none;
    display: block;
    float: left;
    height: 247px;
    margin: 0 11px 1px 0;
    padding: 0;
    width: 275px;
  }
  
  .dicas-interna li, .buscaresult li { width:100%; margin:0 0 10px 0; padding-bottom:10px; border-bottom:1px solid #CCC; overflow:hidden; }
  
  
  .produtos li { text-align:center; }
  .produtos li .img-thumbnail { margin-top:20px; }
  .produtos li h4 a { margin:15px; display:block; font-size:12px; color:#F5911D; font-weight:bold; text-transform:uppercase; text-align:center; line-height:120%; opacity:0.8; filter:alpha(opacity=80); }
  .produtos li h4 a:hover { opacity:1; filter:alpha(opacity=100); }
  
  .colunas-dicas li { background-color:transparent; }
  .colunas-dicas li h3 { color:#0070A4 }
  
  .produtos li:last-child, .colunas-dicas li:last-child { margin-right:0}
  
  .paginterna h1, .paginterna h2 { margin-top:0; margin-left:2px; }
  .paginterna h2 { color:#0070A4; }
  .paginterna .produtos li{ 
	background-color: #FCFCFC;
    border: medium none;
    clear: none;
    display: block;
    float: left;
    height: 247px;
    margin: 0 10px 10px 0;
    padding: 0;
    width: 270px;
  }
  
  .vertodos { margin:10px 0; display:block; }
  
  .pagination { display:block; float:left; clear:both; }
	.ngg-navigation { display:none !important;  float:left; clear:both;  }
	
	.pagination a, .pagination span.current, .ngg-navigation a, .ngg-navigation span.current {
		display:inline-block; padding:10px;
		margin-right:2px;
		text-decoration:none !important; line-height:12px; font-size:12px;
		background-color:#0070A4; color:#fff;
	  }
	  
	  .pagination a.active, .pagination span.current, .ngg-navigation a:active, .ngg-navigation span.current {
		  background-color:#F5911D;
		  font-weight:bold;
	  }
	  
	  .pagination a:hover, .ngg-navigation a:hover{
		 background-color:#F5911D; 
	     color:#000;
	  }
	  
	  .thumbframe { display:block; float:left; clear:left; height:auto; }
	  .textframe { display:block; float:left; clear:none; max-width: 535px;
    min-width: 200px; }
  
  /* imagem */


/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-container img {
	max-width: 100%; /* When images are too wide for containing element, force them to fit. */
	height: auto; /* Override height to match resized width for correct aspect ratio. */
}
.alignleft,
img.alignleft {
	display: inline;
	float: left;
	margin-right: 12px;
	margin-top: 4px;
}
.alignright,
img.alignright {
	display: inline;
	float: right;
	margin-left: 12px;
	margin-top: 4px;
}
.aligncenter,
img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.alignleft,
img.alignright,
img.aligncenter {
	margin-bottom: 12px;
}
.wp-caption {
	background: #f1f1f1;
	line-height: 18px;
	margin-bottom: 20px;
	max-width: 632px !important; /* prevent too-wide images from breaking layout */
	padding: 4px;
	text-align: center;
}
.wp-caption img {
	margin: 5px 5px 0;
}
.wp-caption p.wp-caption-text {
	color: #888;
	font-size: 12px;
	margin: 5px;
}
.wp-smiley {
	margin: 0;
}
.gallery {
	margin: 0 auto 18px;
}
.gallery .gallery-item {
	float: left;
	margin-top: 0;
	text-align: center;
	width: 33%;
}
.gallery-columns-2 .gallery-item {
	width: 50%;
}
.gallery-columns-4 .gallery-item {
	width: 25%;
}
.gallery img {
	border: 2px solid #cfcfcf;
}
.gallery-columns-2 .attachment-medium {
	max-width: 92%;
	height: auto;
}
.gallery-columns-4 .attachment-thumbnail {
	max-width: 84%;
	height: auto;
}
.gallery .gallery-caption {
	color: #888;
	font-size: 12px;
	margin: 0 0 12px;
}
.gallery dl {
	margin: 0;
}
.gallery img {
	border: 10px solid #f1f1f1;
}
.gallery br+br {
	display: none;
}
 .attachment img {/* single attachment images should be centered */
	display: block;
	margin: 0 auto;
}
  
  
table p { margin:5px 0 }
  


/* Footer
-------------------------------------------------- */

.fotodetalhe { position:relative; z-index:5; text-align:right; margin-bottom:-21px; margin-top:-220px }
.hoverfotodetalhe { position:relative; z-index:10; }

#footer { position:relative; z-index:10; background-image:url(img/bg_footer.png); background-position:top; background-repeat:repeat-x; height:226px; padding-top:38px; color:#FFF; overflow:hidden; }
#footer a { color:#FFF; opacity:0.9; }
#footer a:hover { opacity:1; }
.contact-icons a { margin:0 18px; opacity:0.9; filter:alpha(opacity=90);}
.contact-icons a:hover { opacity:1; filter:alpha(opacity=100); }
/* Endfooter
-------------------------------------------------- */

#endfooter {
	background-color:#005279;
	color:#80A9BC;
	height:36px;
}

#endfooter .row { padding:8px 0; }

#endfooter a { color:#FFF; }

.popmake-overlay {    background: rgba(0,0,0,0.7);}
.popmake-close {top: -10px;right: -10px;border-radius: 50%;color: rgb(255, 255, 255);background: rgb(0, 0, 0) none repeat scroll 0% 0%;padding: 9px 10px;border: 1px solid rgb(255, 255, 255);font-size: 20px;}

/* RESPONSIVE CSS
-------------------------------------------------- */

.responsive-navigation { display:none; text-align:right }
.responsive-navigation a { margin-left:10px; }



@media (max-width: 650px) {
#bannerrotativo, .home-destaque { display:none }


}


@media (max-width: 768px) {
	.toparea, .sobrefooter { display:none }
	#endfooter { overflow:hidden; display:block;  height:auto; }
	#endfooter .col-md-6 { text-align:center !important; padding:5px 0; height:auto;  }
	.sideblock { text-align:center }
	.cartoes, .recebanovidades { display:none }
	.navbar-collapse { margin:1px 0; background-color:#F5911D; overflow:hidden }
	.navbar-nav { margin:0; padding:10px; } 
	
}

@media (min-width: 769px) and (max-width: 990px) {
	.nav > li { float:none; display:inline-block; }
	.nav > li > a { color:#0070A4 ; text-align:center }
	.navbar {
    min-height: 50px;
    position: absolute;
    right: 10%;
    top: 55px;
    width: 400px;
	text-align:center;
}
	 }

@media (max-width: 991px) {
	.toparea, .sobrefooter { display:none }
	#endfooter { overflow:hidden; display:block;  height:auto; }
	#endfooter .col-md-6 { text-align:center !important; padding:5px 0; height:auto; }
	.sideblock { text-align:center }
	.responsive-navigation { display:block; }
	.sidebar-categorias { display:none; }
	
	
}


@media (max-width: 1199px) {
	.produtos li { margin-bottom:10px; }
	.hoverfotodetalhe, .fotodetalhe { display:none !important; }
	#header .container { background-image:none; }
	#searchform { display:none; }
	.header-contacts { margin-top:70px; }
	.contact-icons a { margin: 0px !important; }
	.nav > li > a { font-size: 12px; margin-right: 5px; }
}