/*
------------------------------------------------------------------------------------
COM.EZZATO.DEV
By : Andre Lorenzoni at andre@ezzato.com
------------------------------------------------------------------------------------
*/	

/*
webfont
*/

@import url('https://fonts.googleapis.com/css?family=Inder');
@import url('https://d1azc1qln24ryf.cloudfront.net/114779/Socicon/style-cf.css?cp0z2c');
@import url('https://fonts.googleapis.com/css?family=Ropa+Sans');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700');

/*
main
*/

* {
    font-family: 'Ropa Sans', sans-serif;
}

body {
    background-color:#F4F4F4;
}

.page {
    position: relative;
    display: table;
    width: 100%;
}

.col {
    padding:0px;
}

.center-spacer {
    position: relative;
    display: block;
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
}

/*
header
*/

header {
    position: fixed;
    top:0px;
    left:0px;
    width:100%;
    background-color:#F4F4F4;
    position: relative;
   /* padding: 0px 0px 300px 0px;*/

    -o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.5s;
}

header.home {
    position: relative; 
    padding:0px;
}

header .wrapper {
    position: absolute;
    z-index:3;
    display: table;
    width: 100%;
    margin:0 auto;
    padding: 20px 0px;    

    -o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.5s;
}

header .logo {
    position:relative;
    display: table-cell;
    vertical-align: top;
    width:200px;
    height:200px;
    background-size:cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-image: url(../../../files/img/frontend/common/logo.png);

    -o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.5s;
}

/*
header:not(.scrolled).dark .logo {
    background-image: url(../../../files/img/frontend/common/logo-dark.png);
}

header:not(.scrolled).pink .logo {
    background-image: url(../../../files/img/frontend/common/logo-pink.png);
}
*/
header.scrolled:not(.active) .logo {
    height: 70px;
    background-position: bottom 15px center;
    background-image: url(../../../files/img/frontend/common/logo-scrolled.png);
}


header.scrolled:not(.active) .wrapper {
    background-color:#000000;
    position: fixed;
    padding:0px;
    -webkit-box-shadow: 0px 0px 10px -4px rgba(0,0,0,0.62);
    -moz-box-shadow: 0px 0px 10px -4px rgba(0,0,0,0.62);
    box-shadow: 0px 0px 10px -4px rgba(0,0,0,0.62);
}

header:not(.scrolled).pink nav #header-search ,
header:not(.scrolled).dark nav #header-search {
    background-color:#333333;
    color:#ffffff;
}

header.active .wrapper {
    position: fixed;
}

header.active .logo {
    /*background-image: url(../../../files/img/frontend/common/logo-light.png)!important;*/
}

header nav {
    position: absolute;
    display: table-cell;
    vertical-align: top;
    max-width: 1200px;
    right: 0px;
    top: 0px;
}

/*
header.scrolled nav {
   position: relative;
    right:auto;
    top:auto;
}
*/

header nav > ul {
    position: relative;
    display: table-cell;
    list-style: none;
    vertical-align: middle;

    -o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.5s;
    z-index: 3;
}

header nav > ul > li {
    position: relative;
    display: table-cell;
    list-style: none;
    padding: 20px 12px;
    vertical-align: middle;
    text-transform: uppercase;
}

header nav > ul > li > a {
    position: relative;
    vertical-align: middle;
}

header nav > ul > li > a > span {
    vertical-align: middle;
    display: inline-block;
    padding: 5px;
}

header nav > ul > li.drop > a:after {
    font-size:20px;
    color:#78777D;
    font-family: "Material Icons";
    content:'';
    vertical-align: middle;
}

header nav > ul > li > div {
    position: absolute;
    display: none;
    background-color:#F4F4F4;
    padding:20px;
    top:100%;
    -webkit-box-shadow: 0px 0px 25px -4px rgba(0,0,0,0.62);
    -moz-box-shadow: 0px 0px 25px -4px rgba(0,0,0,0.62);
    box-shadow: 0px 0px 25px -4px rgba(0,0,0,0.62);
}

header nav > ul > li > div:after  {
    bottom: 100%;
	left: 30px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(244, 244, 244, 0);
	border-bottom-color: #F4F4F4;
	border-width: 10px;
	margin-left: -10px;
}

header nav > ul > li > div.active {
    display: table;
}

header nav > ul > li > div > ul {
    position: relative;
    display: table;
    list-style: none;
}

header nav > ul > li > div > ul > li {
    position: relative;
    display: table;
    list-style: none;
}

header nav > ul > li > div > ul >li > a{
    position: relative;
    display: table;
    white-space: nowrap;
}

header nav > ul a {
    color:#ffffff;
}

header:not(.scrolled):not(.active).dark nav >ul > li > a:after,
header:not(.scrolled):not(.active).dark nav >ul > li > a,
header:not(.scrolled):not(.active).pink nav >ul > li > a:after,
header:not(.scrolled):not(.active).pink nav >ul > li > a {
    color:#ffffff;
}

header nav > ul a:hover {
    color:#DD382C;
    cursor:pointer;
}

header nav .drop-mobile,
header nav .search {
    position: relative;
    display: table;
    width:30px;
    height: 30px;
    font-size:40px;
    color:#ffffff;
    font-family: "Material Icons";
    content:'';
    vertical-align: middle;
}

header nav .drop-mobile {
    display: none;
}

header nav #header-search {
    position: absolute;
    display: none;
    width: 550px;
    border: none;
    padding: 26px;
    margin-right: -55px;
    top: 0px;
    right: 0px;
    text-transform: uppercase;
    border-bottom: solid 1px #c4c4c4;
}

header .header-search-field {
    position: relative;
    display: table;
    padding:0px!important;
    margin:0px!important;
}

header nav .header-search-field .close {
    position: absolute;
    display: none;
    font-size: 40px;
    color: #78777D;
    font-family: "Material Icons";
    content: '';
    vertical-align: middle;
    top: 12px;
    right: -6px;
}

header nav .header-search-field.active .close {
    display: block;
}

header nav .header-search-field.active #header-search {
    display: table;
}

header .lang-menu,
header .user-menu {
	position: relative;
	cursor: pointer;
	z-index: 1;
}

header .lang-menu .avatar,
header .user-menu .avatar {
	position: relative;
	width: 30px;
	height: 30px;
	-moz-border-radius:50px;
	-webkit-border-radius:50px;
	border-radius:50px;
	overflow:hidden;
	background-color:#cccccc;
	transition:5s;
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	background-image: url(../../../files/img/backend/avatar.jpg);
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 1;
}

header .lang-menu .avatar img,
header .user-menu .avatar img {
	width:100%;
	height:auto;
	vertical-align:top;
}

header .lang-menu .lang-drop,
header .user-menu .user-drop {
	position: absolute;
	display: none;
	top: 30px;
    left: 0px;
	background-color:#6c6c6c;
	padding:10px;
	border-radius: 4px;
}

header .lang-menu.active .lang-drop,
header .user-menu.active .user-drop {
	display: table;
}

header .lang-menu .lang-drop:after,
header .user-menu .user-drop:after {
	bottom: 100%;
	left: 15px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(76, 76, 76, 0);
	border-bottom-color: #6c6c6c;
	border-width: 8px;
	margin-left: -8px;
}

header .lang-menu .lang-drop ul ,
header .user-menu .user-drop ul {
	position: relative;
	display: table;
	width:100%;
	white-space: nowrap;
	font-size:12px;
	color:#ffffff;
	text-align: right;
}

header .lang-menu .lang-drop ul li,
header .user-menu .user-drop ul li {
	position: relative;
	display: table;
	width:100%;
	padding:3px 0px;
	padding: 10px 0px;
	border-bottom: solid 1px #4c4c4c;
}

header .lang-menu .lang-drop ul li:last-child,
header .user-menu .user-drop ul li:last-child {
	border-bottom:none;
}

header .lang-menu .lang-drop ul li > a,
header .lang-menu .lang-drop ul li > div,
header .user-menu .user-drop ul li > a,
header .user-menu .user-drop ul li > div {
	position: relative;
	display: table;
	width:100%;
}

header .lang-menu .lang-drop ul li span,
header .user-menu .user-drop ul li span {
	position: relative;
	display: table;
	width:100%;
	display: table-cell;
	vertical-align: middle;
	font-size: 14px;
	text-transform: uppercase;
}

header .lang-menu .lang-drop ul li:hover,
header .user-menu .user-drop ul li:hover {
	color:#000000;
}

header .lang-menu .lang-drop ul li .icon,
header .user-menu .user-drop ul li .icon {
	font-size: 18px;
	font-family: "Material Icons";
	float: right;
	display: table-cell;
	vertical-align: middle;
	padding: 0px 0px 0px 6px;
	background-size: cover;
	background-position: center;
	min-width: 24px;
	border-radius: 100%;
	overflow: hidden;
	margin-left: 8px;
}

header > .splash-home {
    position: relative;
    display: table;
    width:100%;
    text-align: center;
    height: 80vh;
    background-image: url(../../../files/img/frontend/common/bg-home.jpg);
    background-position: center center;
    background-repeat: no-repeat;
}

header > .splash-internal {
    position: relative;
    display: table;
    width:100%;
    text-align: center;
    height: 320px;
    
    background-position: center center;
    background-repeat: no-repeat;
}

header > .splash-internal.contact {
    background-color:#C1250B;
    height:250px;
}

header > .splash-internal.empresa {
    background-image: url(../../../files/img/frontend/common/bg-empresa.jpg);
}

header > .splash-internal.servicos {
    background-image: url(../../../files/img/frontend/common/bg-servicos.jpg);
}

header > .splash-internal.clientes {
    background-image: url(../../../files/img/frontend/common/bg-clientes.jpg);
}


.block-header {
    position: relative;
    display: table;
    width:100%;
    background-color:#444444;
    text-align: center;
    margin:0 auto;
    padding:80px 0px;

}

.block-hh {
    position: relative;
    display: table;
    width:100%;
    background-color:#DD382C;
    text-align: center;
    margin:0 auto;
    padding:80px 0px;
   
}

.block-header .center-spacer,
.block-hh .center-spacer {
    font-family: 'Open Sans', sans-serif;
    color:#ffffff;
}

.block-header .hhh,
.block-hh .hhh {
    font-size:30px;
    font-family: inherit;
    color:inherit;
}

.block-header .hhh-bold,
.block-hh .hhh-bold {
    font-weight: bold;
    font-family: inherit;
    color:inherit;
}


.spash-wrapper {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width:600px;
}

.spash-wrapper .title {
    text-align: center;
    display: table;
    margin: 0 auto;
    width:100%;
    text-align: center;
    color:#ffffff;
    font-size:60px;
    max-width: 550px;
}

.spash-wrapper .name {
    text-align: center;
    display: table;
    margin: 0 auto;
    width:100%;
    text-align: center;
    color:#ffffff;
    font-size:42px;
    max-width: 550px;
    padding:50px 0px 0px 0px;
}

.spash-wrapper .text {
    text-align: center;
    display: table;
    margin: 0 auto;
    width:100%;
    text-align: center;
    color:#ffffff;
    font-size:22px;
    max-width: 550px;
    padding:10px 0px;
}

.button {
    position: relative;
    display: table;
    margin: 0 auto;
    text-transform: uppercase;
    padding: 8px 15px;
    color:#ffffff;
    font-size:14px;
    background-color: #444444;
}

.button:hover {
    background-color:#DD382C;
}

/*
footer
*/

footer {
    position: relative;
    display: table;
    width:100%;
    background-color: #1C2B32;
}

footer .col {
    vertical-align: middle;
}

footer .col.address {
    background-image: url(../../../files/img/frontend/common/footer-icon.png);
    background-position: left center;
    background-repeat: no-repeat;
    color:#ffffff;
    font-size:14px;
    padding: 100px 0px 100px 35px;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
}

footer .col.logo {
    text-align: right;
    padding: 0px 0px 60px 0px;
}

footer > .wrapper {
    position: relative;
    display: table;
    width: 1000px;
    margin: 0 auto;
    text-align: left;
    margin-bottom: -54px;
}

footer .center-spacer {
    text-align: right;
    padding:20px 0px;
}

footer .center-spacer > span {
    color:#000000;
    font-size:14px;
    padding:0px 10px;
}

footer .center-spacer nav {
    position: relative;
    margin: 0 auto;
}

footer .center-spacer nav > ul {
    position: relative;
    display: table;
    margin: 0 auto;
}

footer .center-spacer nav > ul > li {
    position: relative;
    display: table-cell;
    list-style: none;
    vertical-align: middle;
    padding:0px 10px;
}

footer .center-spacer nav > ul > li > a {
    color:#ffffff;
}

footer .center-spacer nav > ul > li > a:hover {
    color:#000000;
}

footer .center-spacer > .col:nth-child(2) {
    width:100%;
    text-align: right;
}

footer .center-spacer > .col:nth-child(2) > .col {
    display: inline-block;
}

footer .legal {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 12px;
    color: #000000;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
}

/*
section
*/

.page > section {
    position: relative;
    display: table;
    width:100%;
}

.page > section > nav {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width:320px;
    border-top: 3px solid #C69E9C;
    padding:0px 0px 40px 0px;
}

.page > section > nav > ul {
    position: relative;
    text-align: right;
    padding:10px 0px;
}

.page > section > nav > ul > li {
    position: relative;
    text-align: right;
    list-style: none;
}

.page > section > nav > ul > li a {
    position: relative;
    display: block;
    text-align: right;
    color:#777777;
    font-size:16px;
    padding: 2px 0px;
}

.page > section > nav > ul > li a.active,
.page > section > nav > ul > li a:hover {
    color:#C69E9C;
}

.page > section > article {
    position: relative;
    display: inline-block;
    vertical-align: top;
   /* width: -moz-calc(100% - 370px);
    width: -webkit-calc(100% - 370px);
    width: calc(100% - 370px);
    padding:0px 0px 20px 40px;*/
    width: 700px;
    margin:0 auto;
}

.page > section > article h1 {
    position: relative;
    display: inline-block;
    width:50%;
    vertical-align: middle;
    text-transform: uppercase;
    font-weight: 100;
    padding: 0px 0px 20px 0px;
    font-size:50px;
    color:#000000;
    margin-top: -20px;
}

.page > section.internal > article h1 {
    width:100%;
}

.page > section > article h2 {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-weight: 100;
    font-size: 16px;
    color:#78777D;
    max-width: 40%;
    padding: 0px 0px 20px 0px;
    margin-top: -30px;
}

.page > section > figure.header {
    position: relative;
    /*display: table;*/
    width:100%;
    height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.page > section > figure.header iframe {
    height: 300px;   
}

.page > section > article.content {
    position: relative;
    display: block;
   /* margin:50px 40px 50px 320px;*/
   padding: 40px 0px;
}

.page > section > article.content .col {
    position: relative;
    padding-right: 20px;
}

.page > section > article.content > .wrapper,
.page > section > article.content > p {
    position: relative;
    display: block;
    width:100%;
    color:#78777D;
    font-size:16px;
   /* max-width: 900px;*/
}

.page > section > article.content > .wrapper > .col {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width:48%;
   /* padding: 2px 30px 20px 0px;*/
    font-size: 14px;
    
}

h4 {
    font-family: 'Ropa Sans', sans-serif;
    font-size: 30px;
    margin:0px 0px 40px 0px;
    text-transform: uppercase;
    border-bottom: solid 1px;
}

.field-table {
    display: table;
    width:100%;
}

.field-table fieldset {
    display: inline-block;
    width:49%;
}

.page > section > article.content > .wrapper > div,
.page > section > article.content > .wrapper > .col > div,
.page > section > article.content > .wrapper > .col {
    font-family: 'Open Sans', sans-serif;
}

.mark-input input, .mark-input select, .mark-input textarea {
    background-color:#C1250B!important;
}

.page > section > article > figure {
    position: relative;
    display: table;
    width:100%;
    height: 220px;
    background-color: #000000;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.page > section > article > ul {
    position: relative;
    display: table;
    width:100%;
    padding:20px 0px;
}


.page > section > article > ul > li {
    position: relative;
    display: inline-block;
    list-style: none;
    width: 25%;
    min-width: 220px;
    min-height: 230px;
    border-left: 1px solid #BBBBBB;
    margin: 10px 0px;
    padding: 0px 20px;
    text-transform: uppercase;
    font-size: 14px;
    vertical-align: bottom;
    background-size: auto 60%;
    background-position: left 30px top;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-color: #F4F4F4;
    cursor: pointer;
}

.page > section > article > ul > li.doble {
    width:50%;
    min-width: 300px;
}


.page > section > article > ul > li.doble p,
.page > section > article > ul > li.doble div {
    position: relative;
    display: table;
    padding: 0px 0px 0px 180px;
}

.page > section > article > ul > li.doble div:nth-child(1) {
    padding-top: 10px;
    font-size:14px;
}

.page > section > article > ul > li.doble div:nth-child(2) {
    font-size:20px;
}

.page > section > article > ul > li.doble div.price {
    position: relative;
    padding-top: 10px;
}

.page > section > article > ul > li.doble div.price span:nth-child(1) {
    position: relative;
    display: table;
    width:100%;
    font-size:12px;
    color:#333333;
}

.page > section > article > ul > li.doble div.price span:nth-child(2) {
    position: relative;
    display: table;
    width:100%;
    font-size:22px;
    color:#666666;
}

.page > section > article > ul > li.doble p {
    font-size:14px;
    color:#78777D;
    text-transform: none;
}

.page > section > article > ul > li > a {
    position: absolute;
    display: table;
    bottom: 10px;
    left: 10px;
}

.page > section > article > ul > li > span {
    position: absolute;
    font-family: "Material Icons";
    color: #c4c4c4;
    font-size: 32px;
    vertical-align: middle;
    text-align: center;
    right: 6px;
    bottom: 0px;
    font-weight: 100;
}

.page > section.search {
    position: relative;   
}

.page > section.search h1 {
    position: relative;
    display: inline-block;
    width: 60%;
    vertical-align: middle;
    text-transform: uppercase;
    font-weight: 100;
    padding: 20px 0px 20px 0px;
    font-size: 50px;
    color: #000000;  
}

.page > section.search h2 {        
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-weight: 100;
    font-size: 16px;
    color: #78777D;
    max-width: 40%;
}

.page > section.search h3 {
    position: relative;
    vertical-align: middle;
    font-weight: 100;
    padding: 0px 0px 150px 0px;
    font-size: 30px;
    color: #000000;  
}

.page > section.search ul {
    position: relative;
    display: table;
    width:100%;
    padding: 40px 0px;
}

.page > section.search ul li {
    position: relative;
    display: table;
    list-style: none;
    width:100%;
    border-top: solid 1px #cccccc;
    padding:10px 0px;
    cursor: pointer;

    -o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.5s;
}

.page > section.search ul li:hover {
    background-color: #c4c4c4;
}

.page > section.search ul li:hover .col.thumbnail {
   background-color: #c4c4c4; 
}

.page > section.search ul li .col {
    display: table-cell;
    vertical-align: middle;
}

.page > section.search ul li .col.thumbnail {
    position: relative;
    display: inline-block;
    list-style: none;
    width: 90px;
    height: 90px;
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-color: #F4F4F4;
    cursor: pointer;
    margin: 0px 10px;
    
}

.page > section.search ul li .col.name {
    font-size:30px;
    text-align: left;
    width:30%;
}

.page > section.search ul li .col.text {
    font-size:14px;
    text-align: left;
     width:42%;
}

.page > section.search ul li .col.link {
    position:relative;
    text-align: right;
}

.page > section.search ul li .col a {
    font-family: "Material Icons";
    font-size:40px;
}

.page > section.clients {
    position: relative;
     background-color:#ffffff;
}

.page > section.clients > div {
    position: relative;
   
}

.hh {
    color:#DD382C!important;
}

.page > section.clients > div > h3 {
    position: relative;
    font-size: 40px;
    font-weight: 500;
    text-transform: uppercase;
    padding:50px 0px 0px;
    text-align: center;
}

.page > section.clients > div > ul {
    position: relative;
    display: table;
    padding:30px 0px;
    text-align: center;
}

.page > section.clients > div > ul > li {
    position: relative;
    display: inline-block;
    width: 24%;
    font-size: 16px;
    color: #c4c4c4;
    padding: 0px 30px 0px 0px;
    vertical-align: top;
}

.button-container {
    padding:0px 0px 40px 0px;
    position: relative;
    display: table;
    width:100%;
    margin:0 auto;
    text-align: center;
}

.page > section.clients > div > ul > li > a {
    position: relative;
    display: table;
    font-family: "Material Icons";
    font-size: 60px;
    cursor: pointer;
}

.page > section.clients > div > ul > li >  img {
    width:100%;
}

.page > section.clients .image-showcase {
    position: relative;
    display:table;
    width:100%;
    height:250px;
}

.page > section.clients .image-showcase .item {
    position: relative;
    display: table-cell;
    vertical-align: top;
    height:100%;
    width:auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.page > section.home-products {
    position: relative;
     background-color:#ffffff;
     /*padding: 0px 0px 40px 0px;*/
}

.page > section.home-products > div {
    position: relative;
   
}

.page > section.home-products > div > h3 {
    position: relative;
    font-size: 50px;
    font-weight: 500;
    text-transform: uppercase;
    padding:50px 0px 30px;
}

.page > section.home-products > div > ul {
    position: relative;
    display: table;
    padding:30px 0px;
}

.page > section.home-products > div > ul > li {
    position: relative;
    display: inline-block;
    width: 250px;
    font-size: 16px;
    color: #c4c4c4;
    padding: 0px 30px 0px 0px;
    vertical-align: top;
}

.page > section.home-products > div > ul > li > h4 {
    font-size:26px;
    text-transform: uppercase;
    color: #000000;
}
.page > section.home-products > div > ul > li > h4 > .icon-infra,
.page > section.home-products > div > ul > li > h4 > .icon-consumption {
    position: absolute;
    left: -90px;
    top: -20px;
    width: 70px;
    height: 70px;
}

.page > section.home-products > div > ul > li > span {
    font-size:14px;
}

.page > section.home-products > div > ul > li > a {
    position: relative;
    display: table;
    font-family: "Material Icons";
    font-size: 60px;
    cursor: pointer;
}

.page > section.home-products > div > ul > li.product {
    min-width: 200px;
    min-height: 260px;
    border-left: 1px solid #BBBBBB;
    margin: 10px 0px;
    padding: 0px 20px;
    text-transform: uppercase;
    font-size: 14px;
    vertical-align: top;
    background-size: auto 60%;
    background-position: left 30px top;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-color: #ffffff;
    cursor: pointer;
}

.page > section.home-products > div > ul > li.product > div.title {
    position: absolute;
    /*display: table;*/
    bottom: 10px;
    left: 10px;
    max-width: 80%;
}

.page > section.home-products > div > ul > li.product > span {
    position: absolute;
    font-family: "Material Icons";
    color: #c4c4c4;
    font-size: 32px;
    vertical-align: middle;
    text-align: center;
    right: 6px;
    bottom: 0px;
    font-weight: 100;
}

.icon-infra {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 80px;
    height: 80px;
    border: 4px solid  #404040;
    border-radius: 100%;
    background-image: url(../../../files/img/frontend/areas/ico-infra.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 50%;
    margin: 0px 10px 0px 0px;
}


.icon-consumption {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 80px;
    height: 80px;
    border: 4px solid black;
    border-radius: 100%;
    background-image: url(../../../files/img/frontend/areas/ico-consumption.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 50%;
    margin: 0px 10px 0px 0px;
}

.mark-input input,
.mark-input select,
.mark-input textarea {
    border:solid 2px #C69E9C!important;
}

.form-submit {
    padding:10px;
    font-size:17px;
}

.form-sent {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    text-transform: uppercase;
    font-weight: 100;
    padding: 0px 0px 20px 0px;
    font-size: 50px;
    color: #000000;
}

form .icon:after {
    content: '';
    bottom: auto;
    top: 0px;
}

.company-values > ul {
    position: relative;
    display: table;
    width:100%;
    vertical-align: middle;
}

.company-values > ul > li {
    position: relative;
    display: table;
    width:100%;
    border-bottom:solid 1px #FFFFFF;
    vertical-align: middle;
    padding:30px 0px;
}

.company-values > ul > li >.col {
    vertical-align: middle;
}

.company-values > ul > li >.col:nth-child(1) {
    font-size:20px;
    width:87px;
}

.company-values > ul > li >.col:nth-child(2) {
    font-size:40px;
    text-transform: uppercase;
    width: 200px;
    text-align: left;
}

.company-values > ul > li >.col:nth-child(3) {
    font-size:16px;
    font-family: 'Open Sans', sans-serif;
}

.block {
    position: relative;
    display: table;
    width:100%;
}

.block > .block-line {
    position: relative;
    display: table;
    width:100%;
    padding:50px ;
    border-bottom:solid 1px #888888;
    text-align: center;
}

.block > .block-line h3 {
    position: relative;
    font-size: 34px;
    padding: 0px 0px 10px 0px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 50px 0px 0px;
    text-align: center;
    color:#000000;
    padding:0px;
}

.block > .block-line p {
    position: relative;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    color:#000000;
    text-align: center;
}

.center-align {
    text-align: center;
}

.form input, .form select, .form textarea {
    background-color: #1C2B32;
    color:#ffffff;
    font-family: 'Open Sans', sans-serif;
}

/*
--------------------------------------------------------------------------------------
DESKTOP ONLY
--------------------------------------------------------------------------------------
*/

@media only screen and (min-width: 800px) and (max-width: 10000px) { 

    .mobile {
        display: none!important;
    }
	
}

/*
--------------------------------------------------------------------------------------
TABLET SMALL SCREEN
--------------------------------------------------------------------------------------
*/

@media only screen and (min-width: 800px) and (max-width: 1460px) { 

    .mobile {
        display: none!important;
    }
    
    

    

}

@media only screen and (min-width: 800px) and (max-width: 1200px) { 

    footer > .wrapper {
        width:780px;
    }

    .page > section > article > ul > li.doble {
        width:100%;
        text-align: left;
        border-bottom:solid 1px #c4c4c4;
        min-height: 180px;
        border-left: none;
    }

    .page > section > article h1,
    .page > section > article h2 {
        display: table;
        width:100%;
        margin:0px;
        max-width: 100%;
    }

    .page > section > article.content {
        margin:20px 10px;
        width: 90%;
    }
    .page > section > article.content > .wrapper, .page > section > article.content > p {
        max-width:100%;
    }

    .page > section.home-products > div > ul > li > h4 > .icon-infra, 
    .page > section.home-products > div > ul > li > h4 > .icon-consumption {
        position: relative;
        width:40px;
        height: 40px;
        top:auto;
        left:auto;
    }

    .page > section.clients,
    .page > section.home-products {
        padding: 20px;
        width: auto;
        width: 100%;
    }
}

/*
--------------------------------------------------------------------------------------
SMARTPHONE
--------------------------------------------------------------------------------------
*/

@media only screen and (min-width: 200px) and (max-width: 800px) { 

    /* global */
    
    .desktop {
        display: none!important;
    }

    /* header */

    header {
        /*padding: 0px 0px 130px 0px;*/
    }

    header .logo {
        width: 100%;
        height: 120px;
        background-size: auto 85%;
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
         
        display: table;
        display: block;
        background-position: left 5px center;
        background-image: url(../../../files/img/frontend/common/logo-mobile.png);
    }

    header.scrolled:not(.active) .logo {
        background-size: 90%;
        width: 200px;
       /* background-position: right bottom 25px;*/
    }

    header.active .logo {
        /*background-color: #ffffff;
        border-bottom:solid 1px #c4c4c4;*/

        height: 70px;
        background-position: bottom 15px center;
        background-image: url(../../../files/img/frontend/common/logo-scrolled.png);
        background-size: 90%;
        width: 200px;
    }

    header .wrapper {
        padding:0px;
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }

    header nav > ul.main-menu:first-child {
        display: block;
        position: fixed;
        top: 0px;
        left: 0px;
        height: 0px;
        overflow: hidden;
        width: 100%;
        background-color: #000000;
        padding: 0px;
        z-index: -1;
        /*
        -o-transition:.5s;
        -ms-transition:.5s;
        -moz-transition:.5s;
        -webkit-transition:.5s;
        transition:.5s;
        */

        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        transition: none !important;

    }

    header.active nav > ul.main-menu:first-child {
        display: block;
        padding: 80px 0px 0px;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    header nav > ul.main-menu > li {
        display: table;
        width:100%;
        font-size:24px;
        padding:10px 20px;
        border-bottom:solid 1px #c4c4c4;
    }

    header nav > ul.main-menu > li > div {
        position: relative!important;
        width:100%;
        padding: 20px 0px;
        background-color: transparent;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    header nav > ul.main-menu > li > div:after {
        display: none;
    }

    header nav > ul.main-menu > li > div > ul {
        display: table;
        width:100%;
        position: relative!important;
    }

    header nav > ul.main-menu > li > div > ul > li {
        display: table;
        padding:10px 0px;
        width:100%;
    }

    header nav > ul.main-menu > li > div > ul > li a {
        white-space: normal;
        color:#8B8A91;
    }

    header nav .drop-mobile {
        display: table;
        font-size: 46px;
    }

    header nav > ul > li {
        padding:10px 5px;
    }

    header nav .drop-mobile, header nav .drop-mobile,
    header nav .drop-mobile, header nav .search {
      font-size: 46px;  
    }

    header .lang-menu .avatar, header .user-menu .avatar {
        display: inline-block;
        vertical-align: middle;
        border: solid 4px #4c4c4c;
    }

    header .lang-menu .lang-drop, 
    header .user-menu .user-drop {
        position: relative;
        background-color: transparent;
        
    }

    header .lang-menu .lang-drop:after, 
    header .user-menu .user-drop:after {
        display: none;
    }

    header .lang-menu.active .lang-drop,
    header .user-menu.active .user-drop {
        display: inline-block;
        vertical-align: middle;
        padding: 0px;
        margin: 0px;
    }   

    header .lang-menu .lang-drop ul li:last-child, 
    header .user-menu .user-drop ul li:last-child {
        padding: 0px;
        margin: 0px;
    }

    header .lang-menu .lang-drop, 
    header .user-menu .user-drop {
        position: relative;
        top:auto;
        left:auto;
    }

    header .lang-menu .lang-drop ul li span, header .user-menu .user-drop ul li span {
        width: 100%;
        font-size: 24px;
        padding: 0px;
        color: #333333;
        text-align: left;
        display: none;
    }
    
    header .lang-menu .lang-drop ul li .icon, header .user-menu .user-drop ul li .icon {
        width:30px;
        height: 30px;
    }

    header nav .header-search-field.active #header-search {
        width:100vw;
    }

    header nav .header-search-field .close {
        font-size:45px;
    }

    .spash-wrapper {
        padding:0px 10px;
    }

    .spash-wrapper .title {
        font-size: 38px;
        padding-top: 50px;
    }

    .spash-wrapper .text {
        font-size: 16px;
    }

    footer > .wrapper {
        width: 100%;
        margin-bottom: -63px;
        
    }

    footer .col.logo {
        display: none;
    }

    footer .col.address {
        text-align: left;
    }

    .page > section {
        display:block;
        /*padding:10px;*/
        width: auto;
    }

    .page > section > nav {
        display: table;
        width:100%;
        padding:0px;
        cursor:pointer;
    }

    .page > section > nav:before {
        position: relative;
        display: table;
        width:100%;
        font-family: "Material Icons";
        content:'';
        text-align: center;
        font-size: 45px;
        color: #C69E9C;
        padding: 0px 0px;
        border-bottom: solid 1px #C69E9C;
    }

    .page > section > nav.active:before {
        content:'';
    }

    .page > section > nav > ul {
        padding:5px 0px;
        display: none;
    }

    .page > section > nav.active > ul {
        display: table;
        width: 100%;
    }
    
    .page > section > nav > ul > li {
        border-bottom: solid 1px #c4c4c4;
    }

    .page > section > nav > ul > li a {
        text-align: left;
        font-size: 20px;
        padding: 10px 0px;
    }

    .page > section > article {
        display: table;
        width:100%;
        padding:0px;
    }

    .page > section > article.content {
        display: table;
        width:100%;
        padding:10px 0px;
        margin:0px;
    }

    .page > section > article h1 {
        display: table;        
        width:100%;
        padding: 10px 0px 5px 0px;
        font-size: 30px;
        margin: 0px;
    }

    .page > section > article > ul > li.doble p, .page > section > article > ul > li.doble div {
        padding: 0px 0px 0px 110px;
    }

    .icon-infra,
    .icon-consumption {
        width:30px;
        height: 30px;
    }

    .page > section > article h2 {
        margin:0px;
    }

    .page > section > article h2 {
        display: table;
        width:100%;
        padding:0px;
        max-width: 100%;
        font-size:14px;
        padding: 10px 0px;
    }

    .page > section.search h1 {
        font-size:30px;
        display: table;
        width:100%;
    }

    .page > section.search h2 {
        font-size:14px;
        display: table;
        width:100%;
        max-width: 100%;
    }

    .page > section.search ul li .col.name {
        font-size:18px;
    }

    .page > section.search ul li .col.text {
        display: none;
    }

    .page > section > article > ul {
        text-align: center;
    }

    .page > section > article > ul > li {
        position: relative;
        display: inline-block;
        list-style: none;
        width: 25%;
        min-width: 280px;
        min-height: 230px;
        margin: 10px 0px;
        padding: 0px 20px;
        text-transform: uppercase;
        font-size: 14px;
        vertical-align: bottom;
        background-size: auto 50%;
        background-position: left 0px top 10px;
        background-repeat: no-repeat;
        background-blend-mode: multiply;
        background-color: #F4F4F4;
        cursor: pointer;
        border: none;
        margin: 10px;
    }

    .page > section > article > ul > li:not(.doble) {
        background-position: center center;
        border-bottom: 1px solid #c4c4c4;
    }

    .page > section > article > ul > li.doble {
        width:100%;
        text-align: left;
        border-bottom:solid 1px #c4c4c4;
        min-height: 180px;
        display: block;
        padding: 0px;
        margin: 0px;
    }

    .page > section > article.content > .wrapper > .col {
        display: table;
        width:100%;
        padding:20px 0px;
    }

    .page > section > article.content > .wrapper > .col form fieldset,
    .page > section > article.content > .wrapper > .col form {
        width:100%;
    }

    .page > section.home-products > div > h3 ,
    .page > section.clients > div > h3 {
        font-size:30px;
        padding: 30px 0px 0px 0px;
    }

    .page > section.home-products > div > ul > li {
        width:100%;
    }

    .page > section.home-products > div > ul > li > h4 > .icon-infra, 
    .page > section.home-products > div > ul > li > h4 > .icon-consumption {
        position: relative;
        width:40px;
        height: 40px;
        top:auto;
        left:auto;
    }

    .page > section.home-products > div > ul > li > h4 {
        padding:0px 0px 20px 0px;
    }

    .page > section.home-products > div > ul > li.product {
        width:100%;
        border-bottom:1px solid #BBBBBB;
        border-left: none;
        background-position: center center;
    }

    .page > section.clients > div > ul > li {
        display: inline-block;
        min-width: 160px;
        margin: 0 auto;
        text-align: center;

    }

    .form-sent {
        font-size:30px;
    }

    footer .col {
        display: table;
        text-align: center;
        width:100%;
        margin: 10px 0px;
    }

    footer .center-spacer {
        text-align: center;
    }

    footer .center-spacer nav > ul > li {
        padding: 10px;
    }

    .page > section > article.content .col{
        display: table;
        width: 100%;
        padding:10px 0px;
    }

    header > .splash-home {
        background-size:cover;
        background-image: url(../../../files/img/frontend/common/bg-home-mobile.jpg);
    }

    .block-header .center-spacer,
    .block-hh .center-spacer {
        padding:10px;
    }

    header > .splash-internal {
        background-size: cover;
    }

    .company-values > ul > li >.col {
        display: table;
        width:100%;
    }

    .block-header,
    .block-hh {
        padding: 20px 0px;
        text-align: center;
    }

    .block-header .hhh, .block-hh .hhh {
        font-size: 22px;
    }

    header > .splash-internal.contact {
        height:120px;
    }

    section > article {
        padding:10px!important;
        width:auto!important;
        margin:0 auto!important;
    }

    .field-table fieldset {
        width:100%;
        display: table;
    }

}


.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
    display: none;
}

.inputfile-1 + label {
    color: #f1e5e6;
    background-color: #d3394c;
}

.inputfile + label {
    width: 100%;
    font-size: 1.25rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
 
    font-family: 'Open Sans', sans-serif!important;
    width: 100%;
    position: relative;
display: table;
}

.inputfile + label > span {
    font-family: 'Open Sans', sans-serif!important;
    font-size: 12px;
    
}

.inputfile + label > svg {
    padding:10px;
    position: relative;
vertical-align: middle;
}