/*
Theme Name: SF Sistema
Theme URI: http://kleberdeveloper.com/sfsistema
Author: Kleber Oliveira
Author URI: http://kleberdeveloper.com/
Description: Layout desenvolvido para empresa SF Sistema de fixação
Version: 1
Text Domain: sfsistema
*/
* { font-family: Arial, 'Helvetica Neue', Helvetica, Helvetica, sans-serif; }
html, body { background: #F4F3EE; }
h1, h2, h3, h4, h5, h6 { font-family: 'Lato'; line-height: 30px; text-transform: uppercase; font-weight: bolder; }
.hr { background: url(img/img_linha_diagonal.png); height: 12px; margin-bottom: 20px; }

.th {
	line-height: 0;
	display: inline-block;
	border: solid 8px #fff;
	-webkit-box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
	box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
	-webkit-transition: all 200ms ease-out;
	-moz-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
	margin-bottom:20px;
}

#ninja_forms_required_items {
	font-size: 0.7em !important;
}

.remove_style {
	margin:0 !important;
}

p {
	font-size: 0.9em;
}

#header { margin-bottom: 36px; }
#header #logo { margin-top: 32px; margin-bottom: 10px; }
/* effects */
#header .hide-for-small nav a { transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; }
#header .hide-for-small ul, #header .hide-for-small nav li { margin: 0; padding: 0; list-style: none; }
#header .hide-for-small ul { float: right; }
#header .hide-for-small li { float: left; }
#header .hide-for-small a { padding: 46px 12px 10px; text-transform: uppercase; background: none; font-weight: normal; font-size: 12px; color: #000; border-bottom: 3px solid transparent; display: block; }
#header .hide-for-small li.current_page_item a { background: #fff; border-bottom: 3px solid #FAB100; }
#header .hide-for-small li:hover a { border-bottom: 3px solid #FAB100; }


#banner { position: relative; background: url(img/bg_listra_diagonal.png) #FFF; overflow: hidden; margin-bottom: 36px; }
#banner .black { position: relative; background: url(img/bg_listra_diagonal.png) #000; left: 70%; }
#banner .content { position: relative; left: -70%; }
#banner .yellow { position: absolute; background: #F8B300; width: 34%; height: 100%; left: 60%; z-index: 1; }
#banner .white { position: absolute; background: rgba(255,255,255,0.8); width: 70%; height: 100%; left: 0%; z-index: 0; }
#banner h2 { text-align: center; color: #FFF; margin: 40px 0 30px; }
#banner .bx-caption span { color: #000; }
#banner .bx-caption div { width: 114%; margin-left: -14%; }

/* skew */
#banner .yellow, #banner .bx-caption div { transform: skewX(-14deg); -moz-transform: skewX(-20deg); -ms-transform: skewX(-20deg); -o-transform: skewX(-20deg); -webkit-transform: skewX(-20deg); }



#content { padding-bottom:20px; }
#content p { text-align: justify; }
#content header h1,
#content header h2,
#content header h3,
#content header h4,
#content header h5,
#content header h6 {
	text-align: center;
}

.products li div.content {
	background: url(img/img_linha_diagonal.png);
	padding:8px;
}

.products li div.content h4 {
	background: #F4F3EE;
	color: #F8B300;
	text-align: center;
	margin: 0px;
	padding: 6px 0px;
}

.products .image {
	background:#FFF;
}

.products .summary {
	font-size: 0.9em;
	padding: 0.4em 0 0;
}

.clients .th {
	display: table-cell;
	vertical-align: middle;
	height: 160px;
	background: #FFF;
}
.clients .th img {
	max-height: 140px;

}

#circle * { -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; -ms-perspective: 800px; perspective: 800px; }
#circle { }
#circle h3 { text-align: center; }
.circle-img-1 { background-image: url(img/img_produtos.png); }
.circle-img-2 { background-image: url(img/img_servicos.png); }
.circle-img-3 { background-image: url(img/img_clientes.png); }
.circle-item { border: 1px dashed #dbdad6; border-radius: 50%; height: 265px; width: 265px; padding: 11px; margin: 0 auto; }
.circle-info-wrap { margin: 0 auto; border-radius: 50%; padding: 10px; width: 240px; height: 240px; background: #FFF; }
.circle-info { position: absolute; width: 220px; height: 220px; border-radius: 50%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; }
.circle-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; }
.circle-info .circle-info-back { -webkit-transform: rotate3d(0, 1, 0, 180deg); -moz-transform: rotate3d(0, 1, 0, 180deg); -o-transform: rotate3d(0, 1, 0, 180deg); -ms-transform: rotate3d(0, 1, 0, 180deg); transform: rotate3d(0, 1, 0, 180deg); background: #000; }
.circle-info h3 { color: #FFF; margin-top: 70px; text-shadow: 1px 1px 0 #000; font-size: 1.2em; letter-spacing: 0.01em; }
.circle-info p { font-family: 'Lato'; color: #F6C100; width: 180px; margin: 0 auto; text-align: center !important; line-height: 1.2em; text-transform: uppercase; font-size: 0.8em; }
.circle-item:hover .circle-info { -webkit-transform: rotate3d(0, 1, 0, -180deg); -moz-transform: rotate3d(0, 1, 0, -180deg); -o-transform: rotate3d(0, 1, 0, -180deg); -ms-transform: rotate3d(0, 1, 0, -180deg); transform: rotate3d(0, 1, 0, -180deg); }

.contato .side-nav li { padding-left: 28px; }
.contato .side-nav li.ico-telefone { background: url(img/ico-telefone.png) no-repeat left center; }
.contato .side-nav li.ico-localizacao { background: url(img/ico-localizacao.png) no-repeat left center; }
.contato .side-nav li.ico-email { background: url(img/ico-email.png) no-repeat left center; }
.mapa iframe { border: 6px solid #000; }
.mapa.white iframe { border: 6px solid #FFF; }

#footer .hr { margin: 0; }
#footer .content { background: url(img/bg_listra_diagonal.png) #000; padding-bottom: 26px; }
#footer .content h4 { color: #878787; margin: 24px 0px; font-size: 1.2em; letter-spacing: 0.01em; }
#footer .side-nav { padding: 0px; }
#footer .side-nav li { color: #FFF; list-style: none; }

#footer .mapa-site .side-nav a { text-transform: uppercase; color: #FFF; border-bottom: 3px solid transparent; display: inline-block; }
#footer .mapa-site .side-nav a:hover { border-bottom: 3px solid #f7b600; }
#footer .mapa-site .side-nav li.current_page_item a { border-bottom: 3px solid #f7b600; }


@media only screen and (max-width: 780px) {
	h1, h2, h3, h4, h5, h6 { line-height: 24px; }
	#banner img { width: 460px; }
	#banner h2 { margin: 30px -20px 30px 0; font-size: 2em; }
	#banner .bx-caption div { width: 114%; margin-left: -11%; font-size: 0.8em; }
}

@media only screen and (max-width: 767px) {
	#header { margin-bottom: 0; }
}