body { font-size: 100% verdana, arial, tahoma, sans-serif; background:url('/images/ppolegares/pp_2018/fundo-pequenos-polegares.jpg') repeat-y; }

#container { width: 1200px; margin:0 auto; min-height: 80%; }

#topo-barrinha { width: 82%; height: 80px; /*margin: 1% 9% 0;*/ padding: 1% 9%; display: inline-block; position: relative; background: url('/images/ppolegares/pp_2015/cortininha2.png') left bottom repeat-x; }
#topo-barrinha #logo { float: left; display: inline-block; padding-left: 1%; width: 16%; /*background-image: url('/images/ppolegares/pp_2018/logo-polegares2.png');*/ }
#topo-barrinha #logo img { width: 100%; }
#topo-barrinha .voltarCantinho { float: right; display: inline-block; background: #26a9e1; color: #fff; padding: 1% 2%; font-family: Arial; font-size: 1.3rem; margin: 1% 1% 0 0; border-radius: 12px; cursor: pointer; }

#topo-home { width: 82%; margin: 1% 9% 1%; display: inline-block; position: relative; }
#topo-home #logo { float: left; display: inline-block; padding-left: 1%; width: 20%; /*background-image: url('/images/ppolegares/pp_2018/logo-polegares2.png');*/ }
#topo-home #logo img { width: 100%; }
#topo-home #login-mobile { display: none; float: right; width: 28%; color: white; background-color: #33aabe; font-family: "Fira Sans"; font-size: 1.5rem; text-align: center; padding: 0.8rem 0; margin: 1rem 1rem 0 0; border-radius: 1.8rem; -moz-border-radius: 1.8rem; cursor: pointer; }
#topo-home #menu-topo { float: right; width: 70%; height: 60px; margin-top: 1%; }
#topo-home #menu-topo ul { position: relative; right: -12%; width: 98%; height: 60px; line-height: 58px; font-size: 1.4rem; color: #fff; cursor: pointer; }
#topo-home #menu-topo ul li { float: left; width: 22%; height: 100%; }
#topo-home #menu-topo ul li p { font-family: "Fira Sans"; }
#topo-home #menu-topo .opcao01 { position: relative; margin: 0 1% 0 0; width: 20%; text-align: center; overflow: hidden; background-color: #ec536f; -webkit-transform: skew(15deg); -ms-transform: skew(15deg); transform: skew(15deg); z-index: 6; }
#topo-home #menu-topo .opcao01 p { -webkit-transform: skew(-15deg); -ms-transform: skew(-15deg); transform: skew(-15deg); margin: 0; }
#topo-home #menu-topo .opcao02 { position: relative; left: -5%; width: 26%; margin: 0 1% 0 0; text-align: center; overflow: hidden; background-color: #fca04b; -webkit-transform: skew(-10deg); -ms-transform: skew(-10deg); transform: skew(-10deg); z-index: 5; }
#topo-home #menu-topo .opcao02 p { -webkit-transform: skew(10deg); -ms-transform: skew(10deg); transform: skew(10deg); margin: 0; padding: 0 0 0 13%; }
#topo-home #menu-topo .opcao03 { position: relative; left: -8%; width: 28%; margin: 0 auto; text-align: center; border-right: 2px solid; overflow: hidden; background-color: #25bace; -webkit-transform: skew(10deg); -ms-transform: skew(10deg); transform: skew(10deg); z-index: 4; }
#topo-home #menu-topo .opcao03 p { -webkit-transform: skew(-10deg); -ms-transform: skew(-10deg); transform: skew(-10deg); margin: 0; padding: 0 0 0 5%; }
#topo-home #menu-topo .opcao04 { position: relative; left: -12%; height: 93%; margin: 0 auto; text-align: center; overflow: hidden; border:2px solid; -webkit-transform: skew(-30deg); -ms-transform: skew(-30deg); transform: skew(-30deg); z-index: 3; }
#topo-home #menu-topo .opcao04 p { font-weight: 600; font-size: 1.55rem; -webkit-transform: skew(30deg); -ms-transform: skew(30deg); transform: skew(30deg); margin: 0; padding: 0 0 0 4%; }
#topo-home #menu-topo .logado .opcao04 { line-height: 1.55rem; }
#topo-home #menu-topo .logado .opcao04 p { font-size: 0.8rem; line-height: 1.4rem; font-weight: 500; }
#topo-home #menu-topo .logado .opcao04 #sair { padding: 0 0 0 18%; text-transform: uppercase; font-size: 1.2rem; font-weight: bold; -webkit-transform: skew(30deg); -ms-transform: skew(30deg); transform: skew(30deg); }
#topo-home #menu-topo .vazio02 { background-color: #fca04b; width: 2%; }

#topo-home #menu-topo-mobile { display: none; width: 100%; }
#topo-home #menu-topo-mobile ul { display: inline-block; width: 100%; margin-top: 0.5rem; cursor: pointer; }
#topo-home #menu-topo-mobile ul li { width: 33%; height: 4rem; line-height: 3.9rem; float: left; text-align: center; font-family: "Fira Sans"; color: white; font-size: 1.3rem; }
#topo-home #menu-topo-mobile ul li img { width: 32%; vertical-align: middle; }
#topo-home #menu-topo-mobile .opcao01 { width: 32%; background: #ec536f; border-right: 0.1rem #fbfb7f solid; }
#topo-home #menu-topo-mobile .opcao01 img { width: 30%; }
#topo-home #menu-topo-mobile .opcao02 { background: #fca04b; border-right: 0.1rem #fbfb7f solid; }
#topo-home #menu-topo-mobile .opcao03 { width: 34%; background: #25bace; }
#topo-home #menu-topo-mobile .opcao03 img { width: 30%; }

.content-home { background-color: white; border-radius: 50px; -moz-border-radius: 50px; } /*border-radius: 50%; -moz-border-radius: 50%;  na home deslogado isto deu problema*/
#content { display: inline-block; width: 82%; margin:0 9%; position: relative; }
#content p { font-family: "Poetsen"; font-size: 2rem; margin: 0; }
#content span { font-family: "Poetsen"; font-size: 2.3rem; }

#content #conteudo-01 { background:url('/images/ppolegares/pp_2018/home/com-que-roupa-eu-vou.jpg') no-repeat center 0; background-size:cover; border-radius: 50px; -moz-border-radius: 50px; transition: background-image 1s ease-in-out; -webkit-transition: background-image 1s ease-in-out; }
#content #conteudo-01 #box-011 { width: 64%; border: #f1de00 1.5rem solid; border-bottom: 0; background: #25bace; margin: 0 auto 35%; padding: 2.0rem 5rem; text-align: center; color: white; -webkit-transform: skew(15deg); -ms-transform: skew(15deg); transform: skew(15deg); }
#content #conteudo-01 #box-011:after { width: 100%; bottom: 0; transform: skewY(1.2deg); transform-origin: 0 100%; background: inherit; content: ''; display: block; height: 0%; left: -23px; position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden; border: #f1de00 1.5rem solid; border-top: 0; box-shadow: 0 16px 16px -5px #999; }
#content #conteudo-01 #box-011 p { -webkit-transform: skew(-15deg); -ms-transform: skew(-15deg); transform: skew(-15deg); }
#content #conteudo-01 #box-011 .corA { color:#f4cb0d; }
#content #conteudo-01 #box-011 .corB { color:#f05177; }
#content #conteudo-01 #box-011 .corC { color:#ff9d48; }
/* com assine ja: #content #conteudo-01 #box-012 { width: 66%; border: #f1de00 1.5rem solid; border-top: 0; background: #25bace; margin: 0 auto; padding: 2.5rem 5rem 0rem 5rem; text-align: center; color: white; -webkit-transform: skew(-10deg); -ms-transform: skew(-10deg); transform: skew(-10deg); }*/
#content #conteudo-01 #box-012 { width: 66%; border: #f1de00 1.5rem solid; border-top: 0; background: #25bace; margin: 0 auto; padding: 1.5rem 5rem 2rem 5rem; text-align: center; color: white; -webkit-transform: skew(-10deg); -ms-transform: skew(-10deg); transform: skew(-10deg); }
/* com assine ja: #content #conteudo-01 #box-012:before { width: 100%; top: 0; transform: skewY(3deg); transform-origin: 100% 0; background: inherit; content: ''; display: block; height: 10%; left: -23px; position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden; border: #f1de00 1.5rem solid; border-bottom: 0; box-shadow: 0 -15px 20px -6px #999; }*/
#content #conteudo-01 #box-012:before { width: 100%; top: 0; transform: skewY(3deg); transform-origin: 100% 0; background: inherit; content: ''; display: block; height: 18%; left: -24px; position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden; border: #f1de00 1.5rem solid; border-bottom: 0; box-shadow: 0 -15px 20px -6px #999; }
#content #conteudo-01 #box-012 p { font-size: 1.8rem; width: 65%; text-transform: uppercase; text-align: left; -webkit-transform: skew(10deg); -ms-transform: skew(10deg); transform: skew(10deg); }

#content #conteudo-01 #box-012 ul { position: relative; display: inline-block; margin:0 auto; width: 100%; -webkit-transform: skew(10deg); -ms-transform: skew(10deg); transform: skew(10deg); }
#content #conteudo-01 #box-012 ul li { float: left; font-family: "Poetsen"; color: #f1de00; font-size: 2.3rem; }
#content #conteudo-01 #box-012 ul li:nth-child(2) { font-size: 5rem; position: relative; top:-26px; }
#content #conteudo-01 #box-012 ul li:last-child { text-transform: uppercase; background: #f1de00; color: #25bace; padding: 1%; font-size: 2rem; margin-left: 2%; -webkit-transform: skew(-10deg); -ms-transform: skew(-10deg); transform: skew(-10deg); }
#content #conteudo-01 #box-012 ul li:last-child p { width: 100%; margin:0; -webkit-transform: skew(10deg); -ms-transform: skew(10deg); transform: skew(10deg); }
#content #conteudo-01 #box-012 ul li:last-child:before { width: 100%; top: 0; transform: skewY(-3deg); transform-origin: 0 100%; background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden; }

#content #conteudo-02 #box-021 { position:relative; left:-2%; width: 80%; background: #25bace; margin: 3% auto 4.5%; padding: 2.0rem 5rem; text-align: left; color: white; -webkit-transform: skew(15deg); -ms-transform: skew(15deg); transform: skew(15deg); }
#content #conteudo-02 #box-021:before { width: 100%; top: 0; transform: skewY(-1.8deg); transform-origin: 0 100%; background: inherit; content: ''; display: block; height: 50%; position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden; border-bottom: 0; }
#content #conteudo-02 #box-021 div { position: relative; width: 96%; left: 2%; font-family: Arial; font-size: 1.25rem; -webkit-transform: skew(-15deg); -ms-transform: skew(-15deg); transform: skew(-15deg); }
#content #conteudo-02 #box-021 span { font-family: Arial; font-weight: bold; color: #f1e76e; font-size: 1.4rem; }

#content #conteudo-02 #box-022 { position:relative; left:3%; width: 78%; background: #25bace; margin: 3% auto 4.5%; padding: 2.0rem 9rem 2rem 2.5rem; text-align: left; color: white; -webkit-transform: skew(5deg); -ms-transform: skew(5deg); transform: skew(5deg); }
#content #conteudo-02 #box-022:before { width: 100%; top: 0; transform: skewY(1deg); transform-origin: 100% 0; background: inherit; content: ''; display: block; height: 50%; position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden; border-bottom: 0; }
#content #conteudo-02 #box-022 div { font-family: Arial; font-size: 1.25rem; -webkit-transform: skew(-5deg); -ms-transform: skew(-5deg); transform: skew(-5deg); }

#content #conteudo-02 #box-023 { position:relative; left:-5%; width: 80%; background: #25bace; margin: 3% auto 4.5%; padding: 2.0rem 5rem; text-align: left; color: white; -webkit-transform: skew(13deg); -ms-transform: skew(13deg); transform: skew(13deg); }
#content #conteudo-02 #box-023:before { width: 100%; top: 0; transform: skewY(-1deg); transform-origin: 0 100%; background: inherit; content: ''; display: block; height: 50%; position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden; border-bottom: 0; }
#content #conteudo-02 #box-023 div { position: relative; width: 90%; left: 5.5%; font-family: Arial; font-size: 1.25rem; -webkit-transform: skew(-13deg); -ms-transform: skew(-13deg); transform: skew(-13deg); }

#content #conteudo-02 #box-024 { position:relative; left:-3%; width: 80%; background: #25bace; margin: 3% auto 4.5%; padding: 2.0rem 5rem; text-align: left; color: white; -webkit-transform: skew(-10deg); -ms-transform: skew(-10deg); transform: skew(-10deg); }
#content #conteudo-02 #box-024:before { width: 100%; top: 0; transform: skewY(-1deg); transform-origin: 0 100%; background: inherit; content: ''; display: block; height: 50%; position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden; border-bottom: 0; }
#content #conteudo-02 #box-024 div { position: relative; width: 91%; left: 3.5%; font-family: Arial; font-size: 1.25rem; -webkit-transform: skew(10deg); -ms-transform: skew(10deg); transform: skew(10deg); }

#content #conteudo-02 #box-025 { position:relative; left:3%; width: 78%; background: #f1de00; margin: 3% auto 7%; padding: 2.0rem 9rem 2rem 4rem; text-align: left; color: white; -webkit-transform: skew(5deg); -ms-transform: skew(5deg); transform: skew(5deg); box-shadow: 15px 20px 20px -12px #999; font-weight: 700; }
#content #conteudo-02 #box-025:before { width: 100%; top: 0; transform: skewY(1deg); transform-origin: 100% 0; background: inherit; content: ''; display: block; height: 50%; position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden; border-bottom: 0; }
#content #conteudo-02 #box-025 div { font-family: "Fira Sans"; font-size: 1.45rem; color: #27c0c5; -webkit-transform: skew(-5deg); -ms-transform: skew(-5deg); transform: skew(-5deg); }

#content #conteudo-02 #box-026 { z-index: 8; position:relative; width: 70%; border: #f1de00 1.5rem solid; border-top: 0; background: #25bace; margin: 0 auto; padding: 2.5rem 5rem; text-align: center; color: white; -webkit-transform: skew(-15deg); -ms-transform: skew(-15deg); transform: skew(-15deg); box-shadow: 15px 20px 20px -12px #999; }
#content #conteudo-02 #box-026:before { z-index: 9; width: 100%; top: 0; transform: skewY(3deg); transform-origin: 100% 0; background: inherit; content: ''; display: block; height: 50%; left: -3%; position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden; border: #f1de00 1.5rem solid; border-bottom: 0; }
#content #conteudo-02 #box-026 p { z-index: 10; font-size: 2rem; width: 90%; text-align: left; -webkit-transform: skew(15deg); -ms-transform: skew(15deg); transform: skew(15deg); }

#content #conteudo-03 { z-index: 7; position:relative; top:-40px; width: 100%; padding-bottom: 70%; background:url('/images/ppolegares/pp_2018/home/teste-animais-da-fazenda.jpg') no-repeat center 0; background-size:cover; cursor: pointer; }

#content .titulo-destaque { font-size: 1.1rem; color:white; /*text-shadow: 1px 1px 1px #303030;*/ font-family: Ubuntu; font-weight: normal; line-height: 1.2rem; }

@media only screen and (max-width: 1200px) {
	#container { width: 100%; margin:0 auto; min-height: 80%; }
	#topo-home { width: 90%; margin:1% 5%; }
	/*#topo-home #menu-topo .logado .opcao02 { width: 30%; }*/
	#content { width: 90%; margin:0 5%; }

	#content #conteudo-01 #box-011:after { left: -24px; }
	#content #conteudo-01 #box-012:before { left: -24px; height: 15%; }
	#content #conteudo-01 #box-012 { width: 75%; padding: 2.5rem 1rem 0rem 3rem; }
	#content #conteudo-02 #box-026 { width: 76%; padding: 2.5rem 3rem; }
}

@media only screen and (max-width: 960px) { 
	html, body { font-size: 86% !important; }
	#topo-home #logo { width: 22%; }
	#topo-home #menu-topo .logado .opcao04 p { font-size: 0.9rem; line-height: 1.5rem; }

	#content #conteudo-01 #box-011:after { left: -21px; }
	#content #conteudo-01 #box-012:before { left: -21px; }
	/* com assine ja: #content #conteudo-01 #box-012 { width: 76%; padding: 2.5rem 0rem 0rem 2rem; }*/
	#content #conteudo-01 #box-012 { width: 76%; padding: 1.5rem 0rem 2rem 2rem; }	
	#content #conteudo-02 #box-022 { width: 76%; }
	#content #conteudo-02 #box-023 { left: -1%; }
	#content #conteudo-02 #box-023 div { left: 1.5%; }
	#content #conteudo-02 #box-025 { width: 73%; }
	#content #conteudo-02 #box-026 { width: 80%; padding: 2.5rem 1rem 2.5rem 3rem; }
	#content #conteudo-03 { top: -20px; }
}

@media only screen and (max-width: 800px) {
	html, body { font-size: 80% !important; }

	#content #conteudo-01 #box-011 { padding: 1.5rem 5rem 2.5rem; box-shadow: 0 10px 22px -5px #999; }
	#content #conteudo-01 #box-011:after { left: -19px; }
	#content #conteudo-01 #box-012:before { left: -19px; box-shadow: 0 -10px 22px -5px #999; }	

	#content #conteudo-02 #box-026:before { height: 37%; left: -19px; }

	#topo-home #menu-topo ul { height: 50px; line-height: 48px; }
	#topo-home #menu-topo .opcao04 { height: 91%; }
}

@media only screen and (max-width: 720px) {
	html, body { font-size: 65% !important; }

	#content #conteudo-01 #box-011:after { left: -16px; }
	#content #conteudo-01 #box-012:before { left: -16px; }
}

/*
@media only screen and (max-width: 640px) {
	html, body { font-size: 55% !important; }
}
*/

@media only screen and (max-width: 640px) {
	html, body { font-size: 67% !important; }
	#topo-home { width: 100%; margin: 1% 0% 0%; }
	#topo-home #logo { width: 36%; }
	#topo-home #login-mobile { display: block; }
	#topo-home #menu-topo { display: none; }
	#topo-home #menu-topo-mobile { display: block; }
	#topo-home #menu-topo-mobile img { width: 20% !important; margin-right: 2%; }
	#topo-home #menu-topo-mobile .opcao02 img { width: 24% !important; }

	#content { width: 100%; margin:0; border-radius: 0; -moz-border-radius: 0; overflow: hidden; }
	#content #conteudo-01 #box-011 { width: 94%; border: #f1de00 1.2rem solid; background: #25bace; margin: 0 auto 70%; padding: 1.0rem 0rem; text-align: center; color: white; -webkit-transform: unset; -ms-transform: unset; transform: unset; box-shadow: 0 16px 16px -5px #999; }
	#content #conteudo-01 #box-011:after { width: 0%; bottom: 0; transform: unset; transform-origin: unset; background: inherit; content: ''; display: block; height: 0%; left: 0; position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden; border: #f1de00 0 solid; }
	#content #conteudo-01 #box-011 p { -webkit-transform: unset; -ms-transform: unset; transform: unset; }

	/* com assine ja: #content #conteudo-01 #box-012 { position: relative; width: 96%; border: #f1de00 1.5rem solid; border-top: 0; border-right: 0; background: #25bace; margin: 0 auto; padding: 2rem 1rem 0rem 1rem; text-align: center; color: white; -webkit-transform: unset; -ms-transform: unset; transform: unset; }*/
	#content #conteudo-01 #box-012 { position: relative; width: 96%; border: #f1de00 1.5rem solid; border-top: 0; border-right: 0; background: #25bace; margin: 0 auto; padding: 2rem 1rem 2.2rem 1rem; text-align: center; color: white; -webkit-transform: unset; -ms-transform: unset; transform: unset; }
	/* com assine ja: #content #conteudo-01 #box-012:before { width: 100%; top: 0; transform: skewY(3deg); transform-origin: 100% 0; background: inherit; content: ''; display: block; height: 16%; left: -16px; position: absolute; right: 0; z-index: 0; -webkit-backface-visibility: hidden; border: #f1de00 1.5rem solid; border-bottom: 0; box-shadow: 0 -15px 20px -6px #999; }*/
	#content #conteudo-01 #box-012:before { width: 100%; top: 0; transform: skewY(2deg); transform-origin: 100% 0; background: inherit; content: ''; display: block; height: 12%; left: -16px; position: absolute; right: 0; z-index: 0; -webkit-backface-visibility: hidden; border: #f1de00 1.5rem solid; border-bottom: 0; box-shadow: 0 -15px 20px -6px #999; }
	/* com assine ja: #content #conteudo-01 #box-012 p { font-size: 1.8rem; width: 80%; text-transform: uppercase; text-align: left; -webkit-transform: unset; -ms-transform: unset; transform: unset; }*/
	#content #conteudo-01 #box-012 p { font-size: 1.8rem; width: 90%; text-transform: uppercase; text-align: left; -webkit-transform: unset; -ms-transform: unset; transform: unset; }
	#content #conteudo-01 #box-012 ul li:nth-child(1) { display: none; }
	#content #conteudo-01 #box-012 ul li:nth-child(2) { display: none; }
	#content #conteudo-01 #box-012 ul li:nth-child(3) { margin: 1rem 2rem; float: right; }

	#content #conteudo-02 { margin-top: 6%; overflow: hidden; }
	#content #conteudo-02 #box-021 { left: -6%; width: 72%; overflow: hidden; }
	#content #conteudo-02 #box-023 { left: -5%; padding: 2.0rem 2rem 2rem 5rem; overflow: hidden; }
	#content #conteudo-02 #box-024 { left: -12%; overflow: hidden; }
	#content #conteudo-02 #box-024 div { left: 11%; overflow: hidden; }
	#content #conteudo-02 #box-025 { margin-bottom: 8%; padding: 2.0rem 9rem 2rem 3rem; overflow: hidden; }
	#content #conteudo-02 #box-026 { width: 75%; left: -11%; margin-top: 2%; padding: 1.5rem 1rem 2rem 6.5rem; border-right: #f1de00 6.5rem solid; }
	#content #conteudo-02 #box-026::before { height: 6%; left: -4%; overflow: hidden; }

	/* retirei agora por conta dos cantinhos - pode tirar?
	#content #conteudo-03 { top:0; overflow: hidden; }
	.bx-viewport ul li p { font-size: 1.7rem !important; }
	.container-edif-mobile .bx-wrapper .bx-viewport { margin: 25% auto 45% !important; height: 170px !important; }
	.container-edif-mobile .destaque-img { margin-bottom: 10%; }
	*/

	#rodape::before { top:0; box-shadow: 0 0 0 0; }
}

@media only screen and (max-width: 375px) {
	html, body { font-size: 60% !important; }

	#content #conteudo-01 #box-012:before { left: -14px; }
	#content #conteudo-02 #box-026::before { left: -14px; }
	#content #conteudo-03 { top: 0; }

	#rodape { top: 0px; }
}

@media only screen and (max-width: 320px) {
	html, body { font-size: 52% !important; }

	#content #conteudo-03 { top: 0; }
	
	#rodape { top: 0px; }
}