html, body { width: 100%; height: auto; margin: 0; padding: 0; font-family: 'normalidadextended_regular';  font-size: 18px !important;   }
body { background: url(img/proiinc-index.jpg) no-repeat; background-size:100% auto ; background-position: 0 -120px; text-align: justify; overflow-x: hidden !important; animation: fadein 2s; 
       scroll-behavior: smooth; letter-spacing: 1px; overflow-x: hidden !important;
  /*  -moz-animation: fadein 2s; /* Firefox */
  /*  -webkit-animation: fadein 2s; /* Safari and Chrome */
  /*  -o-animation: fadein 2s; /* Opera */ }
@keyframes fadein { from { opacity:0; } to { opacity:1;} }
@-moz-keyframes fadein { /* Firefox */ from { opacity:0; } to { opacity:1;} }
@-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity:0; } to { opacity:1;} }
@-o-keyframes fadein { /* Opera */ from { opacity:0; } to { opacity:1;} }
button, a, li, h1, h2, h3, h4, img, header, footer, .mainn, .box-logo, .conta, .conta_ { transition:all 300ms ease;  }
h1, h2, h3, h4, h5, h6 { font-family: 'normalidadextended_medium'; font-weight:700; -moz-text-align-last: center; text-align-last: center; text-align: center; }
a { text-decoration:none; }
b { font-family: 'normalidadextended_medium'; }
p { -moz-text-align-last: center; text-align-last: center; margin-bottom:50px; }
b { font-weight: 500 !important; }
header { width:100%; height:90px; position:fixed; z-index:999; }
ul.men { width:100%; height:auto; padding:40px 20px 0 0; text-align: right;  }
ul.men li { display: inline-block; list-style:none; margin:0 10px; }
ul.men li a { color:#fff; font-size: 14px !important; cursor:pointer; }
ul.men li a:hover { color:#01b2ff; text-decoration: underline; text-decoration-style: solid ; text-underline-offset: 8px; }
.mainn { background: rgba(0, 0, 0, .8); }
section { color:#fff; min-height:100vh; overflow-x: hidden !important; }
footer { background: url(img/foo.jpg) no-repeat center bottom; background-size:100% auto; padding:50px 0 180px; }
footer a { color:#005a8f; }
footer a:hover { color:#005a8f; }

.conta_ { display:block; margin: 25px auto; width:360px; padding: 15px; background: #005A8F;
background: linear-gradient(90deg,rgba(0, 90, 143, 1) 0%, rgba(0, 175, 251, 1) 100%); transition:all 300ms ease; 
         font-weight:bold; font-size:22px; font-family: 'normalidadextended_medium'; }
.conta_:hover { background:#808080 ; }
.conta_ a { color:#fff ; }
.conta_:hover a { color:#fff ; }

.conta { display: inline-block; max-width:360px; padding: 15px;  transition:all 300ms ease; 
         font-weight:bold; font-size:22px; margin:0 15px; font-family: 'normalidadextended_medium'; }
.conta a { color:#005a91 ; }
.conta:hover a { color:#808080 ; }
.licencias { color:#808080; margin:50px 0; }
.licencias a { color:#808080;  }
.logo_ { width:70%;  margin:60px auto 60px auto; display:block; } 
.logo { position:absolute; margin:20px; width:140px; }
.logo-foo { display: block; width:45%; margin:75px auto; }
.banner1 { background: url(img/banner1.jpg) no-repeat; background-size:cover; color:#fff !important; padding:5%; font-size:22px; }
.txt-left { text-align: left !important; -moz-text-align-last: left; text-align-last: left; }
.box { background:#005a91; width:150px; height:150px; position:relative; text-align:center; display:inline-block; vertical-align: top; margin:5px; }
.box:hover { background:#01b2ff; }
.box:hover img { margin-top: -30px; padding:15px; }
.box h2 {  opacity:0; width: 100%; position:absolute; bottom:10px; font-size:12px; color:#005a91; text-transform: uppercase; }
.box:hover h2 { bottom:20px; opacity:1; }
.box-logo { background:#005a91 url(img/logo.svg) no-repeat center; background-size:80% auto; vertical-align: top; }
.box-logo:hover { background:#01b2ff url(img/logo.svg) no-repeat center; background-size:80% auto; }
.brillo { display:block; width:300px; margin:35px auto; }
.gris { color:#8c8c8c; }
.burger {cursor: pointer; position: fixed; top: 25px; right: 25px; display: none; }
.main { margin-right: 100%; transition:all 400ms ease;  }

#proiinc { padding-top:15vh; height: 90vh; font-size:26px; font-family: 'normalidadextended_medium'; background: url(img/index.png) no-repeat center bottom; background-size:auto 120%; }
#nosotros { padding:12vh 0; height:auto !important; color:#fff;  }
#productos { color:#005991; padding:75px 0 175px 0; background: url(img/bottom.jpg) no-repeat center bottom; background-size:100% auto; }
#productos h2.tt { text-transform:uppercase; max-width:960px; margin:45px auto; }
#servicios { background:#000 url(img/top.jpg) no-repeat center top; background-size:100% auto; color:#fff; padding:175px 0 75px 0;  }
#servicios h3 { text-transform: uppercase; }
#clientes { background:#000; color:#fff; padding:75px 0; height:auto; }
#clientes h4 { color:#00b2ff; font-weight:bold;  }
#clientes .cliente { display:inline-block; width:200px; height: 200px; overflow:  hidden; position: relative; vertical-align: top; line-height: 100%; margin: 0 45px; border-radius: 20px; background:#fff; padding:20px; }
#clientes .cliente img { width:100%; display: block;  position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);}
#marcas { background:#fff url(img/marcas.jpg) no-repeat center bottom; background-size:100% auto; padding:90px 0 150px 0;  color:#005a8f; text-align:center;  }
.marca { display:inline-block; height:80px; margin:25px; }
#marcas .marcas_ img { width:100%; }
#marcas .marcas_ { margin:25px 35px; }
.wh { position:fixed; bottom:80px; right:25px; z-index:999; z-index:999; -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .6));
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .6));  }
.top { position:fixed; bottom:20px; right:25px; z-index:999; -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .6));
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .6));  }

.flickity-page-dots {  display:none; }
.carousel {  background: #fff; margin-bottom: -75px; }
.carousel-cell {  width: 100%;  height: 250px;  margin-right: 10px;  background: #fff;  border-radius: 5px; }
.car-clear { background: none; margin-bottom: 0px; }
/* Icon 1 */

#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
  width: 30px;
  height: 10px;
  position: relative;
  margin: 15px 0 0 -15px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: #fff;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon1 span:nth-child(1) {
  top: 0px;
}

#nav-icon1 span:nth-child(2) {
  top: 13px;
}

#nav-icon1 span:nth-child(3) {
  top: 26px;
}

#nav-icon1.open span:nth-child(1) {
  top: 18px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

#nav-icon1.open span:nth-child(3) {
  top: 18px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.titulo { text-transform:uppercase; color:#01b1fd; }
ul.servicios li { position:relative; margin:45px 0; list-style:none; padding-left:60px; line-height:100%; text-align: left !important; }
ul.servicios li img { position:absolute; left:-10px; top:-20px;  }

@media only screen and (max-width: 1080px) {
ul.men li { margin-bottom:25px; display:block; text-align:right; }
ul.men { transition:all 400ms ease !important;  width: 100%; height: 100vh; padding: 20px 5%; 
         position: fixed; z-index: 99; right: -100%; top: 100px; padding-top: 40px; text-align: right;  
        background: rgba(0, 0, 0, .8) ;  transition:all 600ms ease;  }
.burger {cursor: pointer; position: absolute; top: 25px; right: 25px; display: inline; }
body { background-position: center 70vh; background-size:1280px auto; }
}

@media only screen and (max-width: 960px) {
#clientes .cliente { display:inline-block; width:80px; height: 80px; overflow:  hidden; position: relative; vertical-align: top; line-height: 100%; border-radius: 20px; margin:15px; background:#fff; padding:20px; }
#clientes .cliente img { width:100%; display: block;  position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);}

.box { background:#005a91; width:150px; height:150px; position:relative; text-align:center; display:inline-block; vertical-align: top; margin:5px; }
.box:hover { background:#01b2ff; }
.box:hover img { margin-top: -40px;}
.box h2 {  opacity:0; width: 100%; position:absolute; bottom:10px; font-size:12px; color:#fff; text-transform: uppercase; }
.box:hover h2 { bottom:20px; opacity:1; }
.box-logo { background:#005a91 url(img/logo.svg) no-repeat center; background-size:80% auto; vertical-align: top; }
.box-logo:hover { background:#01b2ff url(img/logo.svg) no-repeat center; background-size:80% auto; }
}


@media only screen and (max-width: 690px) {
body {
    background-position: center 44vh !important;
    background-size: 1280px auto;
}
.marca { display:inline-block; height:auto; width: 75%; margin:35px; }
.conta { display: inline-block; max-width:100% !important; font-weight:bold; text-align: center; font-size:22px; margin: 15px 0; font-family: 'normalidadextended_medium'; }
#clientes .cliente { display:inline-block; width:100%; height: 250px; overflow:  hidden; position: relative; vertical-align: top; line-height: 100%; margin: 0 45px; border-radius: 20px; background:#fff; padding:20px; }
#clientes .cliente img { width:80%; display: block;  position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);}

}