@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap');

/* RESET */
* { font-family: 'Open Sans', sans-serif; }
body { display: table; width: 100%; height: 100%; margin: 0; padding: 0; font-size: 18px; }
body .grid-container { position: relative; z-index: 2; display: table; margin: 0 auto; width: 80%; height: auto; }
body .block { display: block; width: 100%; height: auto; margin: 0 auto; }
i.fa-phone { transform: rotate(90deg); }

/* HEADER */
header { position: relative; overflow: hidden; }
header .item { display: table; width: 100%; height: 100vh;  overflow: hidden; flex-direction: row; flex-flow: wrap; flex-wrap: wrap; align-items: center; background: #000; }

header .item .logo{
	padding: 5% 0 0;
}
header .item .grid-container { display: flex; flex-direction: row; flex-flow: wrap; flex-wrap: wrap; align-items: center; }
header .item .background { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; opacity: .6; background-size: cover; background-position: right center; }
.text-center{
	text-align: center;
}
header .item .background video { }
header .item .containerText {text-align: left; color: #fff; }
header .item .containerText img { display: table; margin: 0 0 10%;    /* filter: brightness(0) invert(1); */ }
header .item .containerText h2 { text-transform: uppercase; color: #fff800; color: #fff; font-size: 2.5rem; margin: 0; line-height: 50px; text-shadow: 10px 10px 10px rgba(0, 0, 0, .5); }
header .item .containerText h2 { }
header .item .containerText h3 { font-weight: 100; color: #fff; font-size: 30px; margin: 4% 0 0; text-shadow: 10px 10px 10px #000; }
header .item .containerText a { display: table; margin: 6% 0 0; background: #2e6415; color: #fff; text-decoration: none; line-height: 40px; padding: 0 30px; border-radius: 20px; text-transform: uppercase; }
header .item .containerText a:hover { background: #333; }
header .item .image { float: right; width: 45%; margin: 0 0 -1%; }
header .item .image img { float: left; width: 100%; height: auto; }
header form { float: right; width: 40%; margin: 0; }
header form input { display: inline; width: 43.2%; height: 40px; border: none; margin: .5%; padding: 0 2.5%; }
header form input[type="email"] { width: 93.2%; }
header form label { display: table; width: 100%; color: #fff; }
header form label input { width: auto; float: left; height: 32px; }
header form label span { line-height: 40px; float: left; margin: 0 0 0 10px; font-size: 14px; }
header form textarea { display: table; width: 92.5%; margin: 1%; border: 0; height: 140px; padding: 2.5%; }
header form button { display: table; margin: 4% auto 0; background: #441e6c; color: #fff; border: none; border-radius: 20px; font-size: 16px; line-height: 40px; padding: 0 70px; cursor: pointer; }
header form button:hover { background: #2a004e; }

/* SERVICES */
section#service { overflow: hidden; padding: 5% 0; display: table; background: #fafafa; }
section#service span { order: 2; width: 50%; padding: 0; text-align: left; vertical-align: middle; }
section#service h1 { font-size: 1.5rem; display: table; margin: 0 auto 2%; width: 80%; text-transform: uppercase; line-height: 50px; color: #2f6415; text-align: center; }
section#service p { text-align: justify;
    color: #333;
    font-size: 16px; }
section#service .description { display: table; width: 100%; margin: 0 auto 2%; }
section#service .item {border-top: 1px solid #ccc;  width: 100%; text-align: center; display: flex; padding: 5% 0 0; margin: 4% .5%; flex-direction: row; flex-flow: row; flex-wrap: wrap; align-items: center;/* background: #fff; */ box-shadow: 0px 10px 10px rgba(51, 51, 51, 0); }
section#service .item i { order: 1; width: 45%; height: 420px; margin: 0 0 0 5%; background-repeat: no-repeat; background-position: center; background-size: cover; }
section#service .item img { display: table; width: 100%; }
section#service .item h2 { text-transform: uppercase; letter-spacing: 1px; color: #333; display: table; width: 80%; min-height: 50px; text-align: left; margin: 0 auto; }
section#service .item h3 { text-transform: uppercase; font-size: 18px; letter-spacing: 1px; color: #2e6415; display: table; width: 80%; min-height: 50px; margin: 4% auto; }
section#service .item p { font-size: 16px; color: #333; line-height: 20px; display: table; width: 80%; margin: 4% auto 0; text-align: justify; }
section#service .item:nth-child(even) { border-top: 1px solid #ccc; }
section#service .item:nth-child(even) i { order: 2; margin: 0 5% 0 0; }
section#service .item:nth-child(even) span { order: 1; }
section#service .item:nth-child(odd) { margin: 0 .5%; padding: 3% 0 0; }
section#service .item:nth-child(odd) i { }
section#service .item:nth-child(odd) span { }

/* TESTIMONIAL */
section#testimonial { overflow: hidden; background-image: url(https://rifetheme.com/wp-content/uploads/2019/02/landerBG4.jpg); padding: 10% 0; position: relative;/* background-size: cover; */ background-position: center; background-attachment: fixed; background-repeat: no-repeat; }
section#testimonial:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .9; }
section#testimonial .item { text-align: center; color: #fff; display: table; width: 70%; margin: 0 auto; }
section#testimonial .item i { font-size: 40px; display: table; margin: 0 auto 6%; }
section#testimonial .item h2 { font-size: 26px; line-height: 32px; }
section#testimonial .item span { font-weight: 100; font-size: 14px; letter-spacing: 2px; }

/* ABOUT */
section#company { overflow: hidden; padding: 0; }
section#company .text { display: table-cell; width: 55%;/* margin: 0 0% 0 0; */ vertical-align: middle; padding: 5% 0 5% 6%; }
section#company .grid-container { display: flex; flex-direction: row; flex-wrap: wrap; flex-flow: row; align-items: flex-start; display: table; vertical-align: middle; }
section#company .text h2 { font-size: 34px; color: #2e6415; text-transform: uppercase; line-height: 34px; font-weight: 900; letter-spacing: 2px; margin: 0 0 6%; }
section#company .text p { font-size: 18px; letter-spacing: 1px; line-height: 28px; color: #333; }
section#company .text a { display: table; margin: 8% 0 0; background: #be0085; line-height: 40px; font-size: 16px; padding: 0 30px; border-radius: 20px; text-transform: uppercase; color: #fff; text-decoration: none; }
section#company .text a:hover { background: #220046; }
section#company .text ul { display: table; width: 100%; list-style: none; padding: 0; margin: 0; }
section#company .text ul li { display: table; width: 100%; margin: 3% 0; font-size: 16px; }
section#company .text ul li:before { content: '\f192'; font-family: 'fontAwesome'; margin: 0 10px 0 0; color: #2e6415; }
section#company .image { display: table-cell; height: 100%; width: 40%;/* flex-direction: row; */ background-image: url(..//images/product2.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; }
section#company form { margin: 0; display: table-cell; width: 45%;/* margin: 0 0% 0 0; */ vertical-align: middle; padding: 0 5% 3%; background: #2e6415; }
section#company form h2 { color: #fff; line-height: 34px; font-size: 32px; letter-spacing: 1px; }
section#company form input { display: inline; width: 43.2%; height: 40px; border: none; margin: .5%; padding: 0 2.5%; }
section#company form input[type="email"] { width: 93.2%; }
section#company form label { display: table; width: 100%; color: #fff; }
section#company form label input { width: auto; float: left; height: 32px; }
section#company form label span { line-height: 40px; float: left; margin: 0 0 0 10px; font-size: 14px; }
section#company form textarea { display: table; width: 92.5%; margin: 1%; border: 0; height: 140px; padding: 2.5%; }
section#company form button { display: table; margin: 4% auto 0; background: #ffffff; border: 1px solid #fff; color: #2e6415;/* border: none; */ border-radius: 20px; font-size: 16px; line-height: 40px; padding: 0 70px; cursor: pointer; }
section#company form button:hover { background: #2f6415; color: #fff; }

/* ABOUT */
section#about { overflow: hidden; padding: 5% 0 0; background-image: url(../images/24582529b714df0.jpg); }
section#about .text { display: table; width: 50%;/* margin: 0 0% 0 0; */ margin: 0 4% 0 0; }
section#about .grid-container { display: flex; flex-direction: row; flex-wrap: wrap; flex-flow: row; align-items: flex-start; }
section#about .text h2 { font-size: 34px; color: #441e6c; text-transform: uppercase; line-height: 34px; font-weight: 900; letter-spacing: 2px; margin: 20% 0 10%; }
section#about .text p { font-size: 20px; letter-spacing: 1px; line-height: 28px; color: #333; }
section#about .text a { display: table; margin: 8% 0 0; background: #be0085; line-height: 40px; font-size: 16px; padding: 0 30px; border-radius: 20px; text-transform: uppercase; color: #fff; text-decoration: none; }
section#about .text a:hover { background: #220046; }
section#about .image { display: table; width: 30%;/* flex-direction: row; */ }
section#about .image img { display: table; width: 100%; height: auto; }

/* CONTACT */
section#contact { overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url(../images/protecao-contra-incendios-nr-23.jpeg); position: relative; padding: 3% 0; }
section#contact:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .8; }
section#contact .grid-container { }
section#contact .info { display: inline-block; width: 100%; margin: 0 5% 0 0; color: #fff; float: left; }
section#contact .info h2 { font-size: 36px; font-weight: 400; margin: 0 0 5px; }
section#contact .info p { font-size: 16px; letter-spacing: 1px; }
section#contact .info a { }
section#contact .info a:hover { }
section#contact .info ul { display: table; width: 100%; margin: 20px 0 0; padding: 0; list-style: none; }
section#contact .info ul li { display: inline-block; width: 100%; list-style: none; }
section#contact .info ul li:nth-child(3) { width: 100% }
section#contact .info ul li:last-of-type { width: 100% }
section#contact .info ul li a { display: table; /* width: 90%;*/ color: #fff; text-decoration: none; font-size: 18px; line-height: 30px; margin: 0; }
section#contact .info ul li a i { margin: 0 10px 0 0; }
section#contact .info ul li:hover a { color: #2e6415; }
section#contact map { display: table; width: 50%; height: 100%; margin: 0; }
section#contact map iframe { display: table; width: 100%; height: 400px; }

/* FOOTER */
footer { display: block; width: 100%; margin: 0; background: #2e6415; color: #fff; padding: 1% 0; font-size: 12px; letter-spacing: 2px; line-height: 40px; }
footer img { float: right; width: auto; height: 40px; filter: brightness(0) invert(1); opacity: .5; }
footer a.scroll { position: fixed; bottom: 35px; left: 35px; width: 40px; height: 40px; display: none; background: #2e6415; color: #fff; text-align: center; line-height: 40px !important; z-index: 3; }
footer a.scroll:hover { background: #333; color: #fff; }
@media only screen and (max-width:1050px) {
    body .grid-container { width: 95%; }
    section#service .item i { margin: 0; width: 100%; order: 1 !important; }
    section#service .item span { width: 100%; margin: 4% 0; order: 2 !important; }
    section#company form { display: table; width: 90%; padding: 5%; }
    section#company .text { display: table; width: 90%; padding: 10% 5%; }
    section#contact .info { }
    section#contact .info ul { }
    section#contact .info ul li { width: 100%; }
    section#contact .info ul li a { }
    section#contact .info { display: table; width: 90%; margin: 5% auto; float: none; }
    section#contact map { display: table; width: 100%; margin: 5% 0; }
    header .item .containerText { display: table; width: 100%; }
    header .item .containerText h2 {margin-top: 30%; display: table;width: 100%;font-size: 40px;line-height: 40px;}
    footer { text-align: center; }
    footer img { float: none; display: table; margin: 2% auto 0; }
	section#service h1 {
    font-size: 1.4rem;
    line-height: unset;
    margin: 3rem auto;
    width: 95%;
	}
}