html, button, input, select, textarea { color: #222;}
body { font-size: 1em; line-height: 1.4;}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection { background: #f2c2c9; color: #a4003a; text-shadow: none;}
::selection { background: #16a085; color: #a4003a; text-shadow: none;}

/*
 * A better looking default horizontal rule
 */
hr { display: block; height: 3px; border: 0; margin: 3em 0; padding: 0;
 background-image: -webkit-linear-gradient(left, #fff, #e6e6e6, #fff);
 background-image: -moz-linear-gradient(left, #fff, #e6e6e6, #fff);
 background-image: -ms-linear-gradient(left, #fff, #e6e6e6, #fff);
 background-image: -o-linear-gradient(left, #fff, #e6e6e6, #fff);
 width: 50%; left: 25%; position: relative; border: none;}

img { vertical-align: middle;}
.clear {clear: both; display: block;}
.seta { display:block; margin: 30px auto; margin-top: -120px !important; float: none !important;}



/*
 * Allow only vertical resizing of textareas.
 */
textarea { resize: vertical;}
/* ==========================================================================
   General styles
   ========================================================================== */

html, body { height: 100%;}
body { font-family: "Open Sans", sans-serif; font-weight: 300; font-size: 16px; color: #555; -webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch;}
.col-md-4 { padding-bottom: 30px;}
.row { margin-right: 0px; margin-left: -15px;}
.modal-md { width: 600px; }
.modal-header { background: #bb1717;}
.modal-header h4 { color: white; font-weight: 700; letter-spacing: 1px;}
.modal-footer { background: #bb1717;}

*{transition: ease-in 0.5s;-webkit-transition: ease-in 0.5s;}
.nav > li > a { padding: 12px 10px;}

.navbar-default { background-color: #C00000; box-shadow: 0 0 3px #ccc; font-weight: 500; padding-bottom: 16px;}
.navbar-default .navbar-nav > li > a { font-size: 0.8em; font-weight: 400; color: #ffffff;}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #fafafa; border-bottom: 3px solid #fff; }
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {  color: #ffffff;  background-color: transparent; border-bottom: 3px solid #fff; }
.navbar-toggle { border-color: transparent; border: 0px solid transparent;}

.odd a img { background: #f5f5f5;}

/* Titles */
h1, h2, h3, h4, h5, h6 { font-weight: 200; color: #555;}
h2 { font-size: 34px; color: #4d4e4f; font-weight: 500;}
h3 { font-size: 24px; font-weight: 500;}

/* Paragraph & Typographic */
p { line-height: 26px; margin-bottom: 20px;}
p.large { font-size: 1em; margin-bottom: 50px;}
.centered { text-align: center;}
strong { font-weight: 700;}
em { font-weight: 300;}
pre { background: #ebebeb; border: none; font-family: "Monaco"; font-size: 16px; color: #4d4e4f; padding: 20px; line-height: 28px;}
small { font-size: 12px;}
blockquote, blockquote p { line-height: 28px; color: #999; font-weight: 300; font-style: italic;}
blockquote { position: relative; margin: 0 0 40px -30px; padding-left: 30px; border-left: 5px solid #3498db;}
blockquote cite { position: absolute; bottom: -25px; right: 0; font-size: 12px; font-style: italic; color: #333; font-weight: 300;}
blockquote cite:before { content: "-- "}

/* Images */
.overflow-image { margin-top: -65px;}

/* Links */
a { color: #4abcc5; word-wrap: break-word; -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
 -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
 -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
 -o-transition: color 0.1s ease-in, background 0.1s ease-in;
 transition: color 0.1s ease-in, background 0.1s ease-in;}
a:hover, a:focus { color: #c0392b; text-decoration: none; outline: 0; }
a:before, a:after { -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
 -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
 -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
 -o-transition: color 0.1s ease-in, background 0.1s ease-in;
 transition: color 0.1s ease-in, background 0.1s ease-in;}

/* ==========================================================================
   Wrap Sections
   ========================================================================== */

#headerwrap { background-color: #fbfbfb; padding-top: 90px; text-align: center; background-attachment: relative; background-position: center center;  width: 100%; padding-bottom: 100px; margin-top: 70px;
 -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%;
 -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#headerwrap h1 { color: #4d4e4f; font-size: 1.9em; font-weight: 700; text-align: center; letter-spacing: 2px; padding-bottom: 30px;}
#headerwrap h2 { color: #006ec3; font-size: 6em; font-weight: 700; text-align: left; margin: 0px;}
#headerwrap h3 { color: #717171; font-size: 2.4em; font-weight: 500; text-align: left; margin-top: 0px; margin-bottom: 50px;}
#headerwrap h4 {line-height: 150%;color: #717171; font-size: 2em;font-weight: 300;text-align: left;}
#headerwrap p { margin-top: 2em;color: #999; font-size: 1.1em; font-weight: 400; text-align: left; line-height: 25px;}
#headerwrap ul { list-style: none; margin-top: 20px; }
#headerwrap ul li { margin-bottom: 30px; margin-left: -40px; }
#headerwrap ul li span{ color: #717171; font-size: 1.6em; font-weight: 400; display: block; line-height: 150%; vertical-align:middle; text-align: right; padding-top: 20px; }
#headerwrap ul li img{ float: left; padding-right: 30px; }
#headerwrap .padroes{ padding: 30px 0px; }

#dell { background: #616261; padding-top: 80px; padding-right: 0; padding-left: 0; padding-bottom: 60px;}
#dell img { display:block; margin: 30px auto;}
#dell h3 { color: #006666;font-size: 1.6em;display: flex;}
#dell h4 { display: inline-block; color: #FD6B0D; font-size: 1em; font-weight: 700; margin-bottom: 25px; }
#dell span { background-color: #fff; padding: 10px; font-size: 1.2em;line-height: 150% }
#dell ul,#dell ol {padding: 0 20px 0;}
#dell ul li {color: #ffffff; font-size: 1.1em; font-weight: 400; margin-bottom: 10px; margin-left: -20px;list-style: none;}
#dell ul li::before {content: "• ";color: #f36b0d;font-size: 2em;position: relative;top: 6px;}
#dell ol li {color: #ffffff; font-size: 1.1em; font-weight: 400; margin-bottom: 10px; margin-left: -20px; list-style: none; }
#dell ol li::before {content: attr(data-number) ".";color: #f36b0d;font-size: 1.2em;}
#dell .espacamento { margin-top: 50px;font-size: 1.3em}
.logo-soniwall{text-align: center;color: #fff;font-size: 2em !important;font-weight: 500;}

#servicos { background-color: #fbfbfb; padding: 90px 0; background-size: cover;}
#servicos p { line-height: 16px; vertical-align:middle; font-size: 0.9em; font-weight: 400;color: #4d4e4f; text-align: left; }
#servicos h1 { color: #4d4e4f; font-size: 1.9em; font-weight: 700; text-align: center; letter-spacing: 2px; padding-bottom: 30px; }
#servicos h2 { color: #4d4e4f; font-size: 1em; font-weight: 700; }
#servicos h3 { color: #006ec3; font-size: 2.4em;; font-weight: 700; margin-bottom: 3px; margin-top: 5px; }
#servicos h4 { color: #4c4d4f; font-size: 1em; font-weight: 700; margin-bottom: 3px; }
#servicos h4.blue { color: #006ec3;}
#servicos ul { list-style: none; }
#servicos ul li { height: 80px; margin-left: -50px; }

#servicos ul li span{ display: table; line-height: normal; vertical-align:middle; font-size: 0.9em; font-weight: 400; color: #4d4e4f; text-align: left; }
#servicos img{ float: left; padding-right: 20px; padding-bottom: 15px;}

#produtos { padding: 80px 0 0; background-color: #0070c0; }
#produtos img { display:block; margin: 30px auto;}
#produtos p { color: #fff; font-size: 0.9em; font-weight: 400;line-height: 150%;text-align: center;}
#produtos h2 { color: #ffffff; font-size: 1.1em; font-weight: 700; margin-bottom: 3px;}
#produtos h3 { color: #fff;font-size: 1.1em;font-weight: 700;margin-bottom: 3px;text-transform: uppercase;}
#produtos h4 { color: #fff; font-size: 1.5em; line-height: 1.3em;}
#produtos .tz ul { list-style: none; margin-left: 123px; margin-top: 20px;}
#produtos .tz ul li{ text-align: left;  margin-left: 0px;font-size: 11px;}
#produtos .nsa ul { margin-top: 0px;}
#produtos .nsa ul li{ text-align: center; margin-left: -45px;}
#produtos ul { list-style: none; margin-top: 60px;}
#produtos ul li{ color: #fff; font-size: 0.8em; margin-bottom: -2px; margin-left: 20px; }
#produtos .linha{ float: left; margin: 0; }
#produtos #box-orange{background: #F36C23;text-align: center;padding: 20px 50px;position: relative;}
/*#produtos #box-orange:before {position: absolute;left: 0;right: 0;top: 100%!important;background: #f36c23;content: "";padding-bottom: 100%;z-index: 0;}*/
#produtos #box-orange p{margin: 26px 0 0;font-size: 1.2em;font-weight: 100;line-height: 27px;}
#produtos #box-grey{background: white;width: 100%;height: 100%;padding: 20px 50px;position: relative;z-index: 1;}
#produtos #box-grey:before{background: white;position: absolute;left: 0;right: 0;top:100% !important;content: "";padding-bottom: 100%;z-index: 0;}
#produtos #box-grey h3{color: #f36c23;font-size: 1.1em;font-weight: 700;margin-bottom: 15px;text-transform: uppercase;}
#produtos #box-grey ul{margin: 0;padding: 0;}
#produtos #box-grey ul li{color: #434343;font-size: 1em;margin: 0;}
#produtos .list{list-style: none !important;margin-left: 0 !important;margin-top: 0 !important;padding: 0 !important;font-size: 11px;line-height: 17px !important;}
#produtos .list li{text-align: center !important;}

.no-padding{padding: 0;}

#contato { background-color: #fff; padding: 80px 0;position: relative;z-index: 2; }
#contato img { display:block; margin: 50px auto;}
#contato p img { display: inline-block;margin: 30px auto 0 !important;padding: 0 !important;}
#contato p { color: #4d4e4f; font-size: 1em; }
#contato h1 { color: #c00000; font-size: 1.9em; font-weight: 700; text-align: center; letter-spacing: 2px; padding-bottom: 30px;}
#contato h2 { color: #006ec3; font-size: 1.1em; font-weight: 700; padding-bottom: 30px;}
#contato .form { padding: 0px;}
#contato .btn { font-weight: 400; font-size: 1em; margin-top: 10px; background-color: #006ec3; color: #fff; border: 0; border-radius: 0px; float: right; padding: 15px 30px;}
#contato .btn:hover, #contact .btn:focus { background-color: #0086ed; outline: 0px;}
#contato .form-control { border-radius: 0px; border: 1px solid #000;}
#contato .form-radio { width: 100px; border-radius: 0px; border: 1px solid #000;}
#contato label { color: #4d4e4f; font-size: 0.9em; font-weight: 400;}
#contato span{ color:#006ec3; font-weight: 700;}
#contato fieldset { color: #4d4e4f; font-size: 0.9em; font-weight: 400; }
#contato fieldset legend { color: #4d4e4f; font-size: 0.9em; font-weight: 400; border: none; margin-bottom: 5px;}
#contato fieldset legend span{ font-size: 1.1em;}
#contato input[type="radio"] { margin: 5px;}

#protecao{background-color: #dedede;position: relative;z-index: 2; }
#protecao .seta {display: block;margin: -43px auto;margin-top: -37px !important;float: none !important;z-index: 2;position: relative;}
#protecao #box-white {padding: 20px 50px 0;}
#protecao #box-white h3 {color: #00457C;font-size: 1.5em;font-weight: 700;margin-bottom: 15px;text-transform: uppercase;line-height: 32px;}
#protecao #box-white p {font-size: 1.4em; line-height: 30px; color: #646464;}
#protecao #box-white i {color: #00457C;font-size: 1em;font-weight: 600;}
#protecao #box-blue {padding: 20px 50px;background-color: #00457C}
#protecao #box-blue p{font-size: 1.2em; line-height: 30px; color: #fff;}
#protecao #box-blue p:nth-child(1){background-image: url('../img/crn-2016.jpg');background-repeat: no-repeat;height: 131px;background-position: 100% 0;}

#premios{padding: 80px 0 0;background-color: #0070c0;position: relative;z-index: 999;}
#premios .seta {display: block;float: none !important;z-index: 2;position: relative;}

#footerwrap { background: #fff; padding: 25px 0 15px 0; border-bottom: 1px solid #ddd; text-align: center;}
#footerwrap img { float: right;}
#footerwrap span.copyright { font-size: 0.7em; line-height: 40px; color: #888; font-weight: 400;}
#footerwrap span.copyright a { color: #888; border-bottom: 1px dotted;}
#footerwrap span.copyright a:hover { color: #3ab7cb; text-decoration: none;}

/* ==========================================================================
   Box Sections
   ========================================================================== */

.white h1 { color: #999;}
.white p { padding-top: 25px;}

/* ==========================================================================
   Image Mask
   ========================================================================== */

.grid figure { margin: 0; position: relative; border: 1px solid #ddd;}
.grid figure img { width: 100%; display: block; position: relative; }
.grid figcaption { position: absolute; top: 0; left: 0; padding: 20px; color: #fff; background-color: #34b1c4;}
.grid figcaption h5 { margin: 0; padding-top: 0px; padding-left: 20px padding-bottom: 5px; color: #fff; font-weight: 700; text-align: left; letter-spacing: 1px;}
.grid figcaption a { text-align: left; padding: 5px 10px; margin-left: 20px; display: inline-block; background: #2f2f2f; color: #fff; font-size: 13px;}

/* Caption Style */
.mask figure { overflow: hidden;}
.mask figure img { -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s;}
.no-touch .mask figure:hover img, .mask figure.cs-hover img { -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px);}
.mask figcaption { height: 50px; width: 100%; top: auto; bottom: 0; opacity: 0;
 -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%);
 -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s; -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; transition: transform 0.4s, opacity 0.1s 0.3s;}
.no-touch .mask figure:hover figcaption, .mask figure.cs-hover figcaption { opacity: 1;
 -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px);
 -webkit-transition: -webkit-transform 0.4s, opacity 0.1s; -moz-transition: -moz-transform 0.4s, opacity 0.1s; transition: transform 0.4s, opacity 0.1s;}
.mask figcaption a { position: absolute; top: 10px; bottom: 10px; right: 30px;}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

@media screen and (min-width:1200px) {
.container { width: 1000px; padding: 0px; }
}   

@media screen and (max-width:1050px), screen and (max-device-width:1050px) {
body .header { background-attachment: scroll;}
}

/*ipad portrait*/
@media only screen and (min-device-width:768px) and (max-device-width : 1024px) and (orientation : portrait) {
.header { background-attachment: scroll;}
}

@media screen and (max-width:769px) {
#headerwrap h1 { font-size: 2.4em;;}
#headerwrap p { font-size: 20px;}
}