/*reset*/
html, body, div, applet, object, iframe, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font,ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, center, i{ font-family: 'Open Sans', sans-serif; border: 0; outline: 0; color: #000; text-decoration:none; font-size: 100%; }
textarea{ font-family: 'Open Sans', sans-serif; font-size: 11px } 
*{margin: 0; padding: 0}
body{line-height: 1;}
:focus{outline: 0}
ol, ul{list-style: none}
table{border-collapse: collapse; border-spacing: 0;}
blockquote, q{quotes: "" ""}
hr{border: 0; color: #FFFFFF; }
blockquote:before, blockquote:after, q:before, q:after {content: ""}
html{}
body{height:100%;width:100%;margin:0;overflow-x:hidden;background-color:#FFF;box-sizing:border-box;}
a{transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;}
.sincrcoll{overflow:hidden;}
em{font-style: normal; font-weight:bold;}
.flotada{clear: both; overflow: hidden;}
.izquierda{float: left;}
.derecha{float: right;}
/*INICIO EN CONSTRUCCION*/
.sinscroll{overflow: hidden;}

logo{position: fixed; top: 50%; left: 50%; margin-left: -150px; margin-top: -63px;}
.construccion{position: fixed; top: 50%; left: 50%; margin-left: -45px; margin-top: 105px;}

/*FIN EN CONSTRUCCION*/

.infocontacte{text-align: center; color: white; font-size: 14px; margin-top: 10px}
.introweb{z-index: 100; width: 100%; height: 100%; position: fixed; background-image: radial-gradient(at 300px 300px, rgba(65,145,89,1) 0, #2c9f98 70%);}
.logointro{position: absolute; top: 50%; left: 50%; margin-top: -123px; margin-left: -250px}

.cabecera{position: fixed; top: 0; z-index: 10; width: 100%; padding: 20px; padding-left: 60px;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;}
.cabecera.conscroll{background-color: white;}
.cabecera .logotipo{width: 124px; height: 59px; background: url(img/logo_blanc.png);}
.cabecera.conscroll .logotipo{width: 124px; height: 59px; background: url(img/logo.png);}

.menu{position: fixed; top: 0; right: 0;z-index: 10; width: 100%;}
.menu ul{position: relative; margin-left: 200px; margin-right: 250px; margin-top: 37px; text-align: center}
.menu ul > li {display: inline-block; color: white; margin-left: 40px;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out; cursor: pointer;}
.menu ul > li:hover {opacity: 0.6;}
.menu2{position: absolute; top: 25px; right: 60px; padding: 10px; border: 1px solid white; box-sizing: border-box; color: white; transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out; cursor: pointer;}
.menu2:hover {opacity: 0.6;}
.menu.apretat ul > li{color: #476b54}
.menu2.apretat{color: black; border: 1px solid #476b54;}

.intro{position: relative; height: 100vh; width: 100%; background: url(img/fons_home.jpg) no-repeat center center; -webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover; background-size: cover; display: flex; align-items: center;justify-content:center}

.intro div h1{color: white; width: 748px; margin-bottom: 40px; display: block; text-align: center; font-size: 32px; line-height: 48px;}
.intro div h2{color: white;width: 748px; display: block; font-weight: 100; text-align: center; font-size: 18px; line-height: 22px;}

.que{padding: 80px; padding-bottom: 0; box-sizing: border-box}
.que h1{margin-bottom: 40px; display: block; text-align: center; font-size: 32px; line-height: 48px;}
.que h2{margin-bottom: 40px; font-weight: 400; text-align: center; font-size: 18px; line-height: 22px;}

.que ul{width: 748px; margin: 0 auto}
.que ul > li{display: inline-block; vertical-align: top; width: 32.26%; margin-right: 1.6%; margin-bottom: 30px; box-sizing: border-box; padding: 40px; font-size: 14px; text-align: center}
.que ul > li:nth-child(3n+0){margin-right: 0;}
.que ul > li:before{display: block; width: 50px; height: 50px; margin-bottom: 10px; content:''; position: relative; left: 50%; margin-left: -25px}
.que ul > li:nth-child(1):before{background: url(img/iconos.png) 0px 0px;}
.que ul > li:nth-child(2):before{background: url(img/iconos.png) -75px 0px;}
.que ul > li:nth-child(3):before{background: url(img/iconos.png) -150px 0px;}
.que ul > li:nth-child(4):before{background: url(img/iconos.png) -225px 0px;}
.que ul > li:nth-child(5):before{background: url(img/iconos.png) -295px 0px; width: 60px; margin-left: -30px}
.que ul > li:nth-child(6):before{background: url(img/iconos.png) -380px 0px;}
.que ul > li:nth-child(7):before{background: url(img/iconos.png) -455px 0px;}
.que ul > li:nth-child(8):before{background: url(img/iconos.png) -530px 0px;}
.que ul > li:nth-child(9):before{background: url(img/iconos.png) -605px 0px;}

.solucions{padding-top: 80px; box-sizing: border-box; text-align: center}
.solucions h1{margin-bottom: 20px; display: block; text-align: center; font-size: 32px; line-height: 48px;}
.solucions ul{box-sizing: border-box; width: 100%; background: url(img/fons-soluciones.jpg) no-repeat center center; -webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.solucions > ul > li{padding: 60px; padding-bottom: 80px; box-sizing: border-box; width: 50%; display: inline-block; line-height: 20px;}
.solucions > ul > li > span{font-weight: bold; display: block; font-size: 18px; margin-bottom: 20px}
.solucions > ul > li > span:before{display: block; width: 55px; height: 50px; margin-bottom: 10px; content:''; position: relative; left: 50%; margin-left: -27px}
#titol1:before{background: url(img/iconos-soluciones.png) 0px 0px;}
#titol2:before{background: url(img/iconos-soluciones.png) -90px 0px;}
#titol1.apretat:before{background: url(img/iconos-soluciones-blanco.png) 0px 0px;}
#titol2.apretat:before{background: url(img/iconos-soluciones-blanco.png) -90px 0px;}
#boto1solucions, #boto2solucions{cursor: pointer;transition:all 0.1s ease-in-out;-webkit-transition:all 0.1s ease-in-out;}
#boto1solucions:hover, #boto2solucions:hover{opacity: 0.8; background: -moz-linear-gradient(left, #419159 0%, #2c9f98 100%); background: linear-gradient(to right, #419159 0%,#2c9f98 100%);}
#boto1solucions.apretat, #boto2solucions.apretat{color: white;opacity: 0.8; background: -moz-linear-gradient(left, #419159 0%, #2c9f98 100%); background: linear-gradient(to right, #419159 0%,#2c9f98 100%);}
#boto1solucions.apretat2, #boto2solucions.apretat2{color: white;opacity: 0.8; background: -moz-linear-gradient(left, #419159 0%, #2c9f98 100%); background: linear-gradient(to right, #419159 0%,#2c9f98 100%);}
#titol1.apretat2:before{background: url(img/iconos-soluciones-blanco.png) 0px 0px;}
#titol2.apretat2:before{background: url(img/iconos-soluciones-blanco.png) -90px 0px;}

.comptabilitat{display: none;}
.erp{display: none;}
.erp .fletxa{width: 50%; height: 60px; position: relative; left: 50%;}
.erp .fletxa:after {border-top: 60px solid #58a68c;border-left: 40px solid transparent; border-right: 40px solid transparent; bottom: 0px;content: "";position: absolute;left: 45%;width: 0; height: 0;}
.comptabilitat .fletxa{width: 50%; height: 60px; position: relative; left: 0;}
.comptabilitat .fletxa:after {border-top: 60px solid #58a68c;border-left: 40px solid transparent; border-right: 40px solid transparent; bottom: 0px;content: "";position: absolute;left: 45%;width: 0; height: 0;}
.erp .contingut, .comptabilitat .contingut{width: 1004px; margin: 0 auto; padding: 40px; box-sizing: border-box; text-align: left}
.erp .contingut h1, .comptabilitat .contingut h1{text-align: left; color: #476b54;}
.close{margin-top: 17px; cursor: pointer; transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;}
.close:hover{opacity: 0.5;}
.contingutbaix {}
.contingutbaix h2{font-size: 16px; font-weight: 100; line-height: 22px}
.contingutbaix em{font-weight: bold; color:#476b54; margin-top: 20px; display: block}
.contingutbaix img{display: block; width: 100%; height: auto; margin-top: 40px}
.contingutbaix > ul{background: none; margin-top: 40px; width: 100%; column-count: 2; column-gap: 80px;}
.contingutbaix > ul > li{ margin-bottom: 20px; line-height: 20px;}
.contingutbaix .mescontingut > li:before{ width: 47px; margin-right: 5px; padding-right: 10px; display: inline-block; vertical-align: middle; content:''; height: 35px; }
.contingutbaix .mescontingut > li:nth-child(1):before{background: url(img/numeros.png) 0px 0px no-repeat;}
.contingutbaix .mescontingut > li:nth-child(2):before{background: url(img/numeros.png) 0px -35px no-repeat;}
.contingutbaix .mescontingut > li:nth-child(3):before{background: url(img/numeros.png) 0px -75px no-repeat;}
.contingutbaix .mescontingut > li:nth-child(4):before{background: url(img/numeros.png) 0px -110px no-repeat;}
.contingutbaix .mescontingut > li:nth-child(5):before{background: url(img/numeros.png) 0px -145px no-repeat;}
.contingutbaix .mescontingut > li:nth-child(6):before{background: url(img/numeros.png) 0px -182px no-repeat;}
.contingutbaix .mescontingut > li:nth-child(7):before{background: url(img/numeros.png) 0px -218px no-repeat;}
.contingutbaix .mescontingut > li:nth-child(8):before{background: url(img/numeros.png) 0px -253px no-repeat;}
.contingutbaix .mescontingut > li:nth-child(9):before{background: url(img/numeros.png) 0px -287px no-repeat;}
.contingutbaix .mescontingut > li:nth-child(10):before{background: url(img/numeros.png) 0px -322px no-repeat;}
.contingutbaix .mescontingut > li:nth-child(11):before{background: url(img/numeros.png) 0px -358px no-repeat;}
.contingutbaix .mescontingut > li:nth-child(12):before{background: url(img/numeros.png) 0px -395px no-repeat;}
.contingutbaix .mescontingut > li:nth-child(13):before{background: url(img/numeros.png) 0px -430px no-repeat;}
.contingutbaix .mescontingut > li:nth-child(14):before{background: url(img/numeros.png) 0px -467px no-repeat;}
.contingutbaix .mescontingut > li:nth-child(15):before{background: url(img/numeros.png) 0px -505px no-repeat;}

.contacta{padding: 80px; box-sizing: border-box; background: #419159; background: -moz-linear-gradient(left, #419159 0%, #2c9f98 100%); background: linear-gradient(to right, #419159 0%,#2c9f98 100%); }
.contacta h1{margin-bottom: 40px; display: block; text-align: center; font-size: 32px; line-height: 48px; color: white;}
.contacta h2{width: 450px; font-weight: 400; text-align: center; font-size: 18px; line-height: 22px; color: white; margin: 0 auto;margin-bottom: 40px; }
.contacta .formulario{width: 450px; margin: 0 auto}
.contacta input, .contacta textarea{width: 100%; padding: 5px; box-sizing: border-box; margin-bottom: 10px; background-color: rgba(255,255,255,0.7); border: 0px solid transparent}
.contacta .enviar{color: white; font-size: 18px; margin-top: 10px; cursor: pointer; background-color: rgba(255,255,255,0); border-top: 1px solid white; border-bottom: 1px solid white;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;}
.contacta .enviar:hover{opacity: 0.5;}
footer{padding: 5px; box-sizing: border-box; text-align: center; color: black; font-size: 12px}



@media screen
and (max-width : 1023px)
{
.que, .intro, .solucions, .contacta, .erp .contingut, .comptabilitat .contingut{padding: 20px; box-sizing: border-box}
.que ul{width: 100%;box-sizing: border-box}
.que ul > li{padding: 0px; width: 100%;}
.intro div h1{width: 100%; font-size: 26px; line-height: 36px;}	
.intro div h2{width: 100%; font-size: 18px; line-height: 22px;}
.solucions > ul > li{padding: 20px; width: 100%;}
.logointro{position: absolute; top: 50%; left: 50%; margin-top: -62px; margin-left: -125px}
.logointro img{width: 250px; height: 123px;}
.contacta h2, .contacta .formulario,  .erp .contingut, .comptabilitat .contingut{width: 100%;}
.menu, .fletxa{display: none}
.cabecera{padding-left: 0;}
.logotipo{margin: 0 auto;}
.contingutbaix > ul{column-count: 1; column-gap: 0px;}
.contingutbaix > ul > li{text-align: center;}
	.contingutbaix .mescontingut > li::before{position: relative;left: 50%;margin-left: -22px;display: block;margin-right: 0}
}