/* peterspaper.solutions */

/* RESET CSS */

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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } 
 /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } 
 body { line-height: 1; } 
 ol, ul { list-style: none; } 
 blockquote, q { quotes: none; } 
 blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } 
 table { border-collapse: collapse; border-spacing: 0; } 

/* --------- */
html {
    font-size: 16px;
}

body {
    font-family: "Work Sans", sans-serif;  
    color: #173E00;
}
div {box-sizing: border-box;}
*:hover {
    transition: all 0.1s linear;
}

header { margin: 0; padding: 0; height: 5rem;margin-top: 4px; align-items: center; display: flex;padding-bottom: 0.2rem;}

a { text-decoration: none; }
.container {margin-top: 2rem;}

.container p {margin-bottom: .8rem;margin: 1rem 0;}

.container h1 {font-size: 2.5rem;font-weight: 700; margin: 1.5rem 0;}

.container h2 {font-size: 1.5rem;font-weight: 700;margin-top: 1.4rem;}

.container h3 {font-weight: 600;}

.int-header {margin: 0 auto;width: 90%;}

header, .int-header{position: relative;}

.logo { width: 7rem;height: 4.8rem;position: absolute;left: 1rem;padding: 0 0 0 0;}
.logo img {width: 7rem;height: 4.8rem;}
nav {
    margin: 0 auto;align-items: center;display: flex;justify-content: center;position: relative;
}
nav a, nav label, .int-header {
    font-size: 1.2rem;color: #173E00;font-weight: 600;border: 2px solid transparent; border-radius: .6rem;line-height: 0.1rem;padding: 1rem;box-sizing: border-box;line-height: 0.1rem;text-align: center; margin-right: 1rem;height:3.2rem;display: grid;align-content: center;
    }

input[type="checkbox"], nav input[type="checkbox"] {appearance: none;border:none;padding: 0; margin:0;}

.lang-cont {
    position: absolute;right: 1rem;z-index:9999;
}
.langContent {
    display: none; padding: 1rem;z-index: 999;
}
.select-lang-txt {display: none;z-index: 999;}
.flag {
    cursor: pointer;user-select: none;float: left;width: 2.4rem;height: 1.5rem;object-fit: cover;margin: 0.2rem; border-radius: 3.5px;border: transparent;
}


.sub {display: none;position: absolute;top: 3rem;width: 100%;max-width: 70rem;background-color: #FFFFFF;justify-content: space-evenly;border: 2.3px solid #173E00;border-radius: 7px;transition: display 0.5s;padding: .2rem;box-sizing: border-box;min-height: 30rem;z-index: 2}
.menu-solutions {width: 100%;}
.sub div {box-sizing:border-box;}

/* width */
.group-items>div::-webkit-scrollbar {width: 8px; }
/* Track */
.group-items>div::-webkit-scrollbar-track {box-shadow: inset 0 0 5px grey;  border-radius: 7px;}
/* Handle */
.group-items>div::-webkit-scrollbar-thumb {background: #173E00; border-radius: 7px;}
/* Handle on hover */
.group-items>div::-webkit-scrollbar-thumb:hover {background: #b30000;  }

.openLangs {display: none;}
button.open-menu {display: none;background-color:transparent;background-image: url(../img/menu.svg);background-repeat: no-repeat;position: absolute;background-size: contain;background-position: center;width: 3rem; height: 1.9rem; right: 3px;border:none;}
.item-menu {align-items: center;}
a.with-sub, label.with-sub {background-image: url(../img/arrow-u.svg);background-repeat: no-repeat;background-position: 96% 50%; background-size: 1rem;}
a.with-sub:hover, label.with-sub:hover {background-image: url(../img/arrow.svg);background-repeat: no-repeat;background-position: 96% 50%; background-size: 1rem;}

label.item-tecnologies, label.item-solutions {display: none;}

.stand-out {border: 2px solid #173E00;border-radius: 3.5px;line-height: 0.1rem;padding: 1rem;}

.active { display: block !important; }
.flex {display: flex !important;}
.open-menu.active { background-image: url(../img/close.svg);}
.open-menu.active ~ .lang-cont { display: flex; }

.item-solutions:hover + .menu-solutions { display: inline-block; }
.item-tecnologies:hover + .menu-tecnologies { display: inline-block; }
.with-sub:hover + .menu-tecnologies>.group-items>a:first-child { background-color: #173E00;background-image: url(../img/arrows.svg);background-position: 96% 50%;background-repeat: no-repeat;color:#F2DA5E;background-size:6.3%;border:none;text-decoration: none;}

nav a:hover, nav label:hover {
    background-color: #173E00;color: hsl(50, 85%, 66%);
}

a.item-tecnologies:hover {background-color: #173E00;color: #F2DA5E;background-image: url(../img/arrow.svg)}

.group-items div:nth-child(2) {display: inline-block;}
.group-items>a {display: block;padding: 1em;border:none;text-align: left;width: 30%;text-transform: uppercase;font-size: 1rem;margin:0;border:transparent;border-radius: 5px;text-wrap: wrap;line-height: 1.2rem;height:4.5rem;position: relative;display: grid;align-content: center;}

.group-items>div {background-color: #FFFFFF;width: 70%; position: absolute; right: 0; top: 0; display: none; padding: 0.3rem; height: 100%; z-index: 1;overflow-y: auto; overflow-x: hidden;}
.group-items>a:hover {background-color: #173E00;background-image: url(../img/arrows.svg);background-position: 96% 50%;background-repeat: no-repeat;color:#F2DA5E;background-size:6.3%;border:none;text-decoration: none;}
.group-items a:hover + div {display: inline-block;box-sizing: border-box;background-color: #FFFFFF;}
.group-items div:hover {display: block;background-color: #FFFFFF;}
.group-items>div:first-child {display: inline-block;}

.tecno {display: flex; height: fit-content;; padding: 1rem; text-align: left; align-items: flex-start; justify-content: space-between; width: 100%; position: relative; flex-direction: column;border-bottom: 1px solid #dfdfdf;}
.tecno:hover {background-color: rgba(255, 255, 255, 0.22);box-shadow:  0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);color:#173E00;}

.tecno h1 {grid-column: 1 / 3;grid-row: 1;font-size: 1.3rem;height: 3rem;}
.tecno p{ grid-column: 1 / 3; grid-row: 2 / 2;font-weight: 400;line-height: 1.2;font-size: 1rem;}
.tecno .image {position: absolute; top: 0; right: 0;height: 3rem;}
.image img {max-width: 15rem; max-height: 3rem; display: grid; margin: .7rem .4rem 0; align-items: center; justify-content: center; align-content: center; justify-items: center;}
.image:hover, .image img:hover {display:grid !important;}

.sub:hover {display: block;}

.container {width: 100%;max-width:80rem;margin: 0 auto;padding: 1rem;}
.home {display: flex;flex-direction: column;align-items: center;margin-top: 3rem;line-height: 3rem;text-align: center;padding: 1rem;box-sizing: border-box;}
.hero h1{font-size: 4.5rem;font-weight: 700;line-height: 1;}
.hero h2{font-size: 2.1rem;font-weight: 700;margin: 1rem 0;}
.hero h3{font-size: 1.2rem;font-weight: 600;margin: .5rem 0;}
.hero p {font-size: 1.3rem;text-transform: uppercase;max-width: 70%;text-align: center;font-weight: 500;line-height: 2rem;margin: 1rem auto;}

.presentation-about {width: 100%;max-width: 60rem;display: flex;flex-direction: row;justify-content: space-around;align-items: flex-end;margin: 0 auto;}
.presentation-about div {display: flex;flex-direction: column;width: 100%;max-height: 15rem;height: 100%;justify-content: flex-end;align-items: flex-start;padding-left: 1rem;}
.presentation-about div:first-child {align-items: flex-end;padding: 0;}
.presentation-about div>span {font-size: 3rem;font-weight: 700;text-align: end;margin: .7rem 0 -.35rem;}
.presentation-about div img {max-height: 12rem; height: auto;}

.about-us {font-size: 1.4rem;}
.about>section {display: flex;flex-direction: column; align-items: center;}

.solutions {text-align: start;}
.solutions article {max-width: 45rem;width: 100%;padding: 1rem;margin: 2rem auto;line-height: 1.3;font-size: 1.2rem;font-weight: 450;box-sizing: border-box;
}
article {max-width: 40rem;width: 100%;padding: 1rem;margin: 2rem auto;line-height: 1.3;font-size: 1.2rem;font-weight: 450;box-sizing: border-box;}
article ul {padding-left: 1rem;margin: 0 1rem;line-height: 1.5;}
article li {display: list-item;list-style: outside;}
article .img-post {display: block;margin: .8rem auto;width: 100%;max-height: 150px;}
article details {border: 0;margin: 1rem 0;font-weight: 600;padding: .5rem;background: rgb(88,239,0);background: linear-gradient(90deg, rgba(88,239,0,1) 10%, rgba(208,255,180,1) 75%);border-radius: 20px;}
article details summary {cursor: pointer;margin: .5rem;}
article iframe {width: 100%;border: none;min-height: 30rem;border-radius: 10px;}
article figure {width: 100%;margin: .8rem auto;}
article figure img {width: 100%;max-width: 60rem;border-radius: 15px;}
article figure figcaption {width: 100%;font-size: .8rem;font-style: italic;text-align: center;}

article .msg-article {padding: 1rem 1.2rem; border-radius: 15px;color: #173E00;border:2px solid #173E00;line-height: 1.4;display: flex;align-items: center;justify-content: space-between;margin: 1rem 0;}
article .msg-article strong {font-weight: 700;}
article .msg-article p{margin: 0;width: 72%;}
article .msg-article a {font-size: 1.2rem;background-color: #173E00;font-weight: 600;border: 2px solid transparent;border-radius: .6rem;border-radius: .6rem;padding: 1rem;color:#F2DA5E;}
article .msg-article a:hover {background-color:#0D2400;color:#F2EB5E;}

article .header-article {position: relative;display: flex;flex-direction: row;width: 100%;border-top: 2px solid #173E00;border-bottom: 2px solid #173E00;height: 5rem;}
article .header-article>div {display: flex;align-items: center;justify-content: center;align-content: center;justify-items: center;width: 50%;}
article .header-article>div a {display: flex;align-items: center;justify-content: space-between;align-content: center;justify-items: center;min-width: 47%;}
article .header-article>div a span{display: flex;align-items: center;justify-content: space-between;align-content: center;justify-items: center;min-width: 50%;}
article .header-article>div a span svg{scale: 0.9;margin-left: .2rem;}

article .header-article>div a>svg:first-child {scale:1.4;}

.contact {width: 100%; max-width: 60rem;display: flex;flex-direction: column;margin: 5rem auto;}
.contact .row {display: flex;flex-direction: row;}
.contact .row>* {width: 50%;}
.contact .row>div:not(:first-child) {display: flex;flex-direction: column;align-items: center;justify-content: space-around;align-content: center;max-height: 100px;}
.info-address {width: 100%;display: flex;flex-direction: column;}
.info-address>div {display: flex;flex-direction: column;width: 100%;padding: 1rem;font-weight: 550;}
.contact .address h4 {margin: 1rem 0 0.5rem;font-size: 1.5rem;font-weight: 700;}
.address {display:flex;flex-direction: column;width: 100%;min-height: 10rem;align-items: flex-start;margin-bottom: 2rem;text-align: center;}
.contact .row img {max-width: 30%;margin-top: 1.3rem;}
.address>div {min-height: 10rem;display: flex;flex-direction: column;line-height: 1.5;}
.info-address h3 {display: flex;align-items: center;margin-bottom: .5rem;font-size: 1.2rem;font-weight: 500;}
.info-address h3 svg {height: 1rem;margin-right: .3rem;}
.address .grid {display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; font-size: 1rem;width: 100%;}

.img-content {width: 50%;}
.img-content img {border-radius: 10px;width: 100%;}
.contact form {display: flex; flex-direction: column;max-width: 50%;justify-content: baseline;}
.contact form label {font-weight: 550;margin: .5rem 0;}
.contact form input {padding: 1rem;margin-bottom: 1rem;font-size: 1.2rem;border-radius: .6rem;border:0.8px solid #eee;}
.contact form textarea {font-size: 1.2rem;padding: 1rem; resize: none;margin-bottom: 1rem;border-radius: .6rem;border:0.8px solid #eee;}
.contact form button {width: 100%;padding: 1rem;background-color: transparent;color: #173E00;font-weight: 600;border: 2px solid #173E00;border-radius: .6rem;font-size: 1.2rem;}
.contact form button:hover {background-color: #173E00;color: #F2DA5E;cursor: pointer;}

@media screen and (max-width: 1100px) {
    html {font-size: 14px;}
    .info-address {flex-direction: column;}
  }
@media screen and (max-width: 765px) {
    html {font-size: 13px;}
    header {width: 100%;top:0;box-sizing: border-box;position: absolute;}
    header, nav{ display: inline-block; text-align: right; right: 0;box-sizing: border-box;}
    .logo {z-index: 2;position: absolute;}
    /*.int-header {width: 100%;margin: 0;border-radius:0; position: absolute;display: block;height: 100vh;z-index: 1;padding: 0;}*/
    /*header, nav, .lang-cont {background-color: #FFFFFF80;}*/
    .with-blur {filter: blur(50px);}
    input[type="checkbox"]:hover {background-color: transparent;}
   /* a.item-tecnologies, a.item-solutions {display: none;}
    label.item-tecnologies, label.item-solutions {display: block;}*/
    button.open-menu {display: block;width: 2.8rem;height: 4.8rem;}
    nav {display: none;margin-top:5rem;min-height: 350px;z-index: 999;}
    nav>a, nav>label {display: block;text-align: left;font-size: 1.5rem;padding: 2rem 1.4rem;margin-right: 0px;margin: .5rem .5rem 0 .5rem;}
    .sub {border-radius: 0;top: 0rem;background-color: #FFFFFF90;margin-right: 0;position: relative;border:none;width: 98%;padding:0;max-height: 30rem;margin: 0 auto;}

    .group-items {width:100%;box-sizing: border-box;}
    .group-items>a, .group-items>label {width: 30%;border-bottom: 1px dotted #cdcdcd;}
    .group-items>a, .group-items>label, .group-items>a span {display: block;position: relative;padding:.3rem;text-align: left;font-size: 1.05rem;height: auto;line-height: 1.5;min-height: 2rem;text-transform: capitalize;}
    .group-items a:hover {background-image: none;}
    .tecno span {font-size: .9rem;}
    .group-items>div {text-align: left;min-height: 300px;margin-bottom: .5rem;background-color: transparent;}
    .group-items img {max-width: 8rem;}
    .group-view {width: 100%;display: none;position: relative;text-align: left;}

    .lang-cont {display: none;position: relative;bottom: 0;top:auto;right:auto;padding: .8rem;justify-content: center;align-items: center;}
    .select-lang-txt {display: inline-block;margin-right: 1rem;}
    .flag {width: 2.7rem; height: 1.8rem;}
    .hero h1 {font-size: 3.5rem;width: 100%;}
    .hero p { font-size: 1.2rem;margin: 1rem auto;padding: 1rem;}
    .contact form {max-width: 100%;}
    .info-address > div {width: 100%;}
    .about-us {margin-top:  5rem;}
    .presentation-about {flex-direction: row;}
    .presentation-about div>span {font-size: 2.3rem;}
    .presentation-about div>img{max-height: 10rem;}
    .presentation-about div:first-child {align-items: end; padding: 0; }
    .contact .row {flex-direction: column;}
    .contact .row>* {width: 100%;}
    .address .grid {font-size: 1rem;display: flex;flex-direction: column;}
    .contact .row>div:not(:first-child) {max-height: 150px;}

    article .header-article>div a {min-width: 80%;}
    article .header-article>div a>svg:first-child {scale: 1.2; }
}
@media screen and (max-width: 765px) {
    .presentation-about div>span {font-size: 1.8rem;}
    .presentation-about div>img{max-height: 7rem;}

}