/*Reset*/
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 
abbr, acronym, address, big, cite, code, del, 
dfn, em, font, img, ins, kbd, q, s, samp, smcontent, 
strike, strong, sub, sup, tt, var, dl, dt, dd, 
ol, ul, li, fieldset, form, label, legend, table, 
caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
:focus {outline: 0;}
body {line-height: 1; color: black; background: white;}
ol, ul {list-style: none;}
table {border-collapse: separate; border-spacing: 0; border-collapse: collapse;}
caption, th, td {text-align: left; font-weight: normal;}
blockquote:before, blockquote:after,
q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a{text-decoration: none;} 
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary{display: block;}
/*End Reset*/

body{font: normal normal normal 0.95em/1.15em Arial, Helvetica, sans-serif; color: #0060AF; background: #1f3e6d;}
html, body{height: 100%;}

header{position: relative; float: left; width: 100%; height: auto; background: url(../giroembalagens_img/header-bg.png); z-index: 501;}
header #header{position: relative; max-width: 1000px; height: 144px; margin: 0 auto;}
header #header #logo{position: absolute; float: left; width: 200px;}
header #header #logo img{max-width: 100%; margin: 6px 0 0 4px}
header #header #content{float: right; width: 100%; height: auto;}
header #header #content #fone{float: left; width: 99%; height: 48px; padding: 7px 1% 0 0; color: #265093; text-align: right;}
header #header #content #fone div{float: right; width: 220px;  background: url(../giroembalagens_img/fone.png) 0 7px no-repeat;}
header #header #content #fone p{font-size: 1.15em;}
header #header #content #fone h1{font-size: 1.85em;}
header #header #content .search{float: left; width: 100%; height: 51px;}
header #header #content .search form{float: right; width: 600px; margin-top: 14px;}
header #header #content .search input[type="text"],
header #header #content .search select{float: left; height: 23px; width: 252px; line-height: 23px; margin-left: 5px; padding: 0; border: none;} 
header #header #content .search .btn{float: right; width: 80px; padding: 0; height: 24px;}
header #header #content nav{float: right; width: 800px; height: 37px; font-size: 1.1em; border-right: 1px solid #c6c7ca;}
header #header #content nav ul{float: right; width: 100%; text-align: center;}
header #header #content nav li{float: left; width: 16.51%; line-height: 37px; border-left: 1px solid #c6c7ca;}
header #header #content nav li:hover{background: #EAEBEC; border-bottom: 1px solid #999;}
header #header #content nav a{display: block; color: #556;}
header #header #content nav a:hover{color: #222;}
header #header a.collapse{display: none; float: right; width: 104px; height: 40px; margin: 5px 0 0 0; background: url(../giroembalagens_img/menu-collapse.png) no-repeat;}

@media (max-width: 999px){
    #header{float: left; width: 100%; padding: 0 1%;}
    header #header #content .search form{float: right; width: 350px; margin-top: 14px;}
    header #header #content .search select{display: none;} 
    header #header #content nav{width: 690px;}
}
@media (max-width: 799px){
    header #header #logo{width: 150px;}
    header #header #content nav{width: 640px; border-right: none;}
}
@media (max-width: 639px){
    header #header{height: 105px;}
    header #header #logo{width: 160px;}
    header #header #content .search{display: none;}
    header #header a.collapse{display: block;}
    header #header #content nav{display: none; position: absolute; width: 280px; height: auto; right: 1%; top: 98px; border: none; background: #F5F6F7; box-shadow: -1px 1px 6px #000;}
    header #header #content nav ul{text-align: left;}
    header #header #content nav li{float: left; width: 260px; padding-left: 20px; line-height: 50px; border-bottom: 1px solid #DDD;}
}
@media (max-width: 479px){
    header #header #content #fone{display: none;}
    header #header a.collapse{margin: 60px 0 0 0;}
}

main{position: relative; float: left; width: 100%; background: #FFF;}
main #main{position: relative; max-width: 930px; margin: 0 auto 15px; padding: 35px; border-radius: 0 0 4px 4px; box-shadow: 0 0 6px #999; border: 1px solid #EEE;}
main #main #content{float: left; width: 100%; min-height: 350px;}
body.Categorias #main{max-width: 975px; padding: 35px 10px;}

.default{float: left; width: 100%; margin: 30px 0;}

.default.home{margin: 0 0 30px;}
.home .home-slider{float: left; width: 107.6%; margin: -35px -35px 0 -35px; border-bottom: 1px solid #000;}
.home .home-slider img{float: left; width: 100%; padding:0 ;}
.home .home-info{float: left; width: 100%; margin: 30px 0 0;}
.home .home-info p{margin: 10px 0;}

.default.empresa{}
.empresa .text{float: left; width: 100%; padding: 0 5% 0 0;}
.empresa .text p{margin: 10px 0 0;}
.empresa .image{float: left; width: 100%;}
.empresa .image img{float: left; width: 46%; margin: 30px 3% 0 0; padding: 0.5%; outline: 1px solid #1f3e6d;}

.default.contato{} 
.contato .form{float: left; width: 50%; padding: 0 1% 2%;}
.contato .form .wp100{width: 98%;}
.contato .form form{padding: 0 20px;}
.contato .form legend{float: left; margin: 10px 0 20px;}
.contato .form fieldset{margin: 10px 0 20px 0;}
.contato .form label{float: left; height: 60px; margin-right: 2%;}
.contato .form label span{display: block; margin: 0 0 1px 2px;}
.contato .form input[type="tel"],
.contato .form input[type="email"],
.contato .form input[type="text"], 
.contato .form textarea{width: 100%; height: 30px; line-height: 24px; padding: 1px 3px; font-size: 1em; border: 1px solid #ABC; background: #FFF; border-radius: 2px;}
.contato .form .empty,
.contato .form .empty,
.contato .form .empty{border: 1px solid #ff7d7d !important; background: #fff4f4;}
.contato .form textarea{height: 160px;}
.contato .form label.ta{float: left; width: 98%; height: 180px;}
.contato .form input:focus, 
.contato .form textarea:focus{box-shadow: -2px 2px 3px #BBB;}
.contato .form .btn{width: 120px; height: 36px; line-height: 34px; font-size: 1.067em;}
.contato #text{float: left; width: 38%; padding: 5% 0 0 8%;}
.contato #text p{margin: 30px 0; line-height: 1.3em; font-size: 1.05em;}

.localizacao p{margin: 0 1% 0.5%; font-size: 1.05em; line-height: 1.2em; text-align: right;}
.localizacao div{float: left; width: 100%; border: 1px solid #1f3e6d;}
.localizacao div iframe{float: left; width: 100%; height: 450px;}

.grupos h4{margin: 0 0 1% 4%;}
/*.grupos p{margin: 0 0 2% 4%;}*/
.grupos .image-box{float: left; width: 20%; height: 270px; margin-top: 10px; text-align: center;}
.grupos .image-box .image{width: 100%;}
.grupos .image-box .image img{width: 140px; border: 1px solid #CFE3FF; padding: 4px; box-shadow: -1px 1px 2px #DDD;}
.grupos .image-box .image img:hover{border: 1px solid #ed9e37;}
.grupos .image-box .image span{position: absolute; float: right; width: 30px; height: 30px;}
.grupos .image-box .image a:hover span{background: url(../giroembalagens_img/zoom-out.png) right bottom no-repeat;}
.grupos .image-box .image p{ height: 35px;margin: 5px; font-size: 0.867em; line-height: 16px;}
.grupos .image-box a.button{float: right; width: 90px !important; margin: 0 14% 0 0; line-height: 21px; font-size: 0.85em; font-weight: normal;}

.produtos #grupo{position: relative; float: left; width: 96%; padding: 0 2%;}
.produtos #grupo a.button{position: absolute; float: right; width: 90px; top: -40px; right: 2%; text-align: center; border: none; padding: 4px 0; color: #FFF; background: #294686;}
.produtos #grupo a.button:before{content: '\00ab'; margin-right: 4px;}
.produtos #grupo img{float: left; width: 250px; padding: 0.5%; border: 1px solid #CCC;}
.produtos #grupo h4{float: left; width: 480px; margin: 0 0 0 20px;}
.produtos table{float: left; width: 96%; margin: 20px 2% 0; outline: 1px solid #77787F;}
.produtos table th, td{padding: 10px;}
.produtos table th{padding: 6px 12px; background: #77787F; font-weight: 600; border-bottom: 1px solid #CCC; font-variant: small-caps; color: #FFF;}

.default.marcas{margin-bottom: 30px;}
.marcas h4{margin-left: 5%;}
.marcas p{margin: 10px 0 0 2%;}
.marcas .marca{float: left; width: 17%; margin: 20px 1.5% 10px; text-align: center; outline: 1px solid #DDD;}
.marcas .marca img{margin: 10px 0; width: 110px;}
.marcas .marca p{display: table; width: 100%; height: 34px; margin: 0; background: #E7E8E9; font-size: 0.85em; line-height: 1em;}
.marcas .marca p span{display: table-cell; vertical-align: middle;}

.whatsapp{position: fixed; background-color: #00850f; color: #FFF; border-radius: 20px; bottom: 100px; right: 10px; box-shadow: -1px 1px 8px rgba(0,0,0,0.5); padding: 0; z-index: 10; transition-duration: 300ms;}
.whatsapp a{text-decoration: none; color: #FFF;}
.whatsapp .icon{float: left; height: 20px; width: 20px; padding: 8px; font-size: 1.25rem; border-radius: 100%; background: #0c7619; transition-duration: 300ms;}
.whatsapp .icon svg{width: 20px;}
.whatsapp .text{float: right; width: 65px; padding: 9px 8px 0 2px; font-size: 14px; transition-duration: 300ms; }
.whatsapp a:hover{text-decoration: none;}
.whatsapp:hover{background-color: #1d6727;}
.whatsapp:hover .icon{background-color: #0e3f14;}

@media (max-width: 999px){
    main #main{max-width: 960px; margin: 0 auto 15px; padding: 10px; border-radius: 0; box-shadow: none; border: none;}
    .marcas .marca{width: 22%;}
    .grupos .image-box{width: 25%;}
    .produtos #grupo{width: 100%; padding: 20px 0 0;}
    .produtos table{width: 100%; margin: 20px 0 0;}
    .produtos #grupo a.button{top: -20px;}
}
@media (max-width: 799px){
    .marcas .marca{width: 30.3%;}
    .produtos .cod{display: none;}
    .produtos #grupo h4{width: 340px;}
}
@media (max-width: 639px){
    .contato .form{width: 98%;}
    .contato #text{width: 100%; padding: 0;}
    .localizacao div iframe{width: 100% !important;}
    .marcas .marca{width: 48%; margin: 20px 1% 10px;}
    .grupos .image-box{width: 33.3%;}
    .grupos .image-box .image img{width: 130px;}
    .produtos .emb{display: none;}
    .produtos #grupo img{width: 200px;}
    .produtos #grupo h4{width: 240px; margin-left: 10px;}
    .whatsapp{bottom: 30px; right: 8px; border-radius: 100%;}
    .whatsapp .icon{height: 30px; width: 30px; padding: 10px;}
    .whatsapp .icon svg{width: 30px;}
    .whatsapp .text{display: none;}
}
@media (max-width: 479px){
    .home .home-slider{display: none;}
    .empresa .image img{width: 97%; margin: 30px 0 0 0; padding: 1%;}
    .contato .form form{padding: 0 10px;}
    .grupos .image-box{width: 50%;}
    .grupos .image-box .image img{width: 120px;}
    .produtos #grupo h4{width: 100%; margin: 10px 0 0;}
}

h1{font-size: 1.70em;}
h2{font-size: 1.50em;}
h3{font-size: 1.30em;}
h4{font-size: 1.10em;}
h5{font-size: 0.9em;}
h6{font-size: 0.7em;}
legend,
h1, h2, h3, h4, h5, h6{ line-height: 1.05em; font-weight: 700; font-variant: small-caps; color: #008CFF;}
legend{float: left; width: 100%;  margin: 6px 0; font-size: 1.10em;}

.btn,
.button{background: #EF9700; background-image: linear-gradient(to bottom, #FFA200, #EF9700); color: #FFF; cursor: pointer; border-radius: 2px; border: 1px solid; border-color: #EF9700 #EF9700 #7F5000 #7F5000;}
.btn:hover,
.button:hover{background: #FFA200;}

.wi20{width: 18.99%;}
.wi25{width: 23.99%;}
.wi30{width: 28.99%;}
.wi35{width: 33.99%;}

.clear{clear: both;}
.msg-error{display: none; width: 95%;  line-height: 24px; padding: 0 2%; color: #F00; border: 1px solid #F00; background: #fff4f4;}
.zebra{background: #EEE; border-bottom: 1px solid #DDD;}
img.shadow{box-shadow: -1px 1px 6px #666;}
.box-stl{background: #F4F5F6; border: 1px solid; border-color: #FFF #FFF #CCC #CCC; outline: 1px solid #EEE;}
.bs{box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}

footer{position: relative; float: left; width: 100%; color: #FFF; background: url(../giroembalagens_img/footer-bg.png) repeat-x;}
footer #footer{position: relative; max-width: 1000px; height: 140px; margin: 0 auto; padding: 0 0 10px;}
footer #footer .newsletter{float: left; width: 100%; height: 44px;}
footer #footer .newsletter form{width: 800px; margin: 10px auto 0; height: 24px;}
footer #footer .newsletter label{float: left; line-height: 24px;}
footer #footer .newsletter input{float: left; width: 225px; padding: 0 0 0 5px; height: 24px; line-height: 24px; margin-left: 5px; border: none;} 
footer #footer .newsletter .btn{float: left; width: 80px; padding: 0; height: 24px; line-height: 24px;}

footer #footer #info{float: left; width: 100%; padding-top: 10px;}
footer #footer #info address{float: left; width: 240px; line-height: 20px;}
footer #footer #info nav{float: right; width: 540px; text-align: right;}
footer #footer #info nav ul{float: right; width: auto;}
footer #footer #info nav li{float: left; margin-left: 12px;}
footer #footer #info nav a{margin-left: 5px; color: #FFF;}
footer #footer #info nav a:hover{text-decoration: underline; color: #89f8ff;}
footer #footer #info p{float: right; width: 230px; margin: 44px 0 0; font-size: 0.8em; text-align: right;}

@media (max-width: 999px){
    footer #footer{float: left; width: 100%; padding: 0 1%;}
    footer #footer .newsletter form{width: 710px;}
    footer #footer .newsletter label{width: 145px; margin-top: -5px; line-height: 1em;}
}
@media (max-width: 799px){
    footer{background: #1F3E6D; padding: 10px 0;}
    footer #footer .newsletter{height: 60px;}
    footer #footer .newsletter form{width: 600px;}
    footer #footer .newsletter label{width: 100%; line-height: 1.2em;}
    footer #footer #info nav{width: 340px; text-align: left;}
    footer #footer #info nav li{width: 40%; line-height: 1.75em;}
    footer #footer #info p{margin: 10px 0 0;}
}
@media (max-width: 639px){
    footer #footer .newsletter{height: 100px;}
    footer #footer .newsletter form{float: left; width: 470px;}
    footer #footer .newsletter input{height: 30px; width: 78%; line-height: 30px; margin: 5px 5px 0 0;} 
    footer #footer .newsletter .btn{height: 30px; line-height: 30px;}
    footer #footer #info nav{display: none;}
    footer #footer #info p{width: 100%;}
}
@media (max-width: 479px){
    footer #footer .newsletter{height: 140px;}
    footer #footer .newsletter form{width: 95%; margin: 10px 3% 0 2%;}
    footer #footer .newsletter input{width: 100%;} 
    footer #footer #info address{width: 94%; margin: 0 3%; padding-bottom: 10px;}
    footer #footer #info nav li{width: 40%;}
}