html, body, div, span, applet, object, iframe, img,
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: 'Roboto', sans-serif; font-weight: 500; box-sizing: border-box; border:0;outline:0;color:rgba(0,22,66,1);text-decoration:none;font-size:14px; line-height: 1.4em; box-sizing: border-box}
*{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:""}
strong{color:inherit;font-weight:700;}
html,body{width:100%;min-height: 100vh; margin:0;padding:0; overflow-x:hidden;}


/*flexat*/
.flexat{display: inline-flex!important; width: 100%; flex-wrap: wrap;}
.flexat.dalt{align-items: flex-start}
.flexat.baix{align-items: flex-end}
.flexat.centre{align-items: center}
.flexat.mismaaltura{align-items: stretch;}
.flexat.inici{justify-content: flex-start}
.flexat.final{justify-content: flex-end}
.flexat.centrat{justify-content: center}
.flexat.total{justify-content: space-between}
.flexat2{width: 45%;}
.flexat2grafic{width: 48%;}
.flexat12:nth-child(1){width: 30%;}
.flexat12:nth-child(2){width: 66%}
.flexat12espai:nth-child(1){width: 30%;}
.flexat12espai:nth-child(2){width: 60%}
.flexat13:nth-child(1){width: 15%;}
.flexat13:nth-child(2){width: 83%}
.flexat3, .flexat3llarg, .flexat3curt{width: 30%;}
.flexat4{width: 24%;}
.flexat4total{width: 25%;}
.flexat5{width: 18%}
.flexat5total{width: 20%; margin-bottom: 0px}
.flexat5:nth-child(1){width: 23%}
.flexat4sol{width: 22%; margin-left: 35%; margin-right: 43%}

/*paddingymargin*/
.margensuperior0{margin-top: 0px!important}
.margensuperior10{margin-top: 10px!important}
.margensuperior20{margin-top: 20px!important}
.margensuperior40{margin-top: 40px!important}
.margensuperior60{margin-top: 60px!important}
.margensuperior80{margin-top: 100px!important}
.margensuperior120{margin-top: 120px!important}
.margensuperior220{margin-top: 220px!important}
.margeninferior0{margin-bottom:0px!important}
.margenderecha0{margin-right:0px!important}
.margenizquierda20{margin-left:20px!important; width: calc(100% - 40px)}
.margenizquierda40{margin-left:40px!important; width: calc(100% - 80px)}
.margeninferior10{margin-bottom:10px!important}
.margeninferior15{margin-bottom:15px!important}
.margeninferior20{margin-bottom:20px!important}
.margeninferior40{margin-bottom: 40px!important}
.margeninferior60{margin-bottom: 60px!important}
.margeninferior80{margin-bottom: 100px!important}
.margenizquierdo20{margin-left:20px!important}
.padding5laterales{padding-left: 5px; padding-right: 5px}
.padding5{padding: 5px;}
.padding10{padding: 10px!important;}
.padding15{padding: 15px;}
.padding20{padding: 20px;}
.padding40{padding: 40px;}
.padding80{padding: 80px;}
.padding180{padding: 180px;}
.padding10201020{padding: 10px 20px 5px 20px}
.paddinginferior15{padding-bottom: 15px;}
.paddinginferior20{padding-bottom: 20px;}
.paddingsuperior10{padding-top: 10px!important;}
.paddingsuperior20{padding-top: 20px!important;}
.paddingsuperior40{padding-top: 40px;}
.formulario.paddingderecha0 > div{padding-right: 0!important}
.bordeinferior{border-bottom: 1px solid rgba(0,22,66,1);}
.line0{line-height: 0}
.ample100, .ancho100{width: 100%!important}
.ancho190{width: 190px!important}
/*otras generales*/
.oculto{display: none!important}
a, .comoboton, .enviar, .boton{-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; cursor: pointer}

.bloque{display: block}
.foto100{width: 100%; height: auto;}
.relativo{position: relative}
.solomovil{display: none}
.Zebra_DatePicker_Icon_Wrapper{width: 100%}
/*texto*/
.negrita{font-weight: bold}
.subrayado{text-decoration:underline}
.texto24{font-size: 24px;}
.texto40{font-size: 40px; font-weight: bold}
.texto18{font-size: 18px;}
.textoderecha{text-align:right}
.textocentro{text-align: center!important}

body{min-height: 100vh; width: 100%; background: url(../img/fons-home.jpg) center center no-repeat; background-size: cover}

header{width: 100%; position: absolute; top: 0px; left: 0;}
header > div:nth-child(1){text-align: right; background-color: rgba(51,80,184,1); color: white; font-size: 12px; padding: 5px 20px 5px 20px}
header > div:nth-child(2){width: 100%; padding: 20px 0px 20px 60px; background: rgba(255,255,255,0.8)}
header > div:nth-child(2) img{width: 300px}
    
.info{width: 350px; position: absolute; bottom: 100px; left: 60px}
.info h1{font-weight: bold; font-style: italic; font-size: 66px; line-height: 1em; margin-bottom:20px;color:white}
.info h2{margin-top: 40px; display: block; border-bottom: 1px solid white; font-weight: 400; line-height: 1em; font-size: 30px; margin-bottom: 10px; color:white}
.info a{font-weight: 100; font-size: 18px; color: white; line-height: 1.2em;}

.socials{display: block; margin-top: 20px}
.socials > .contenido{width: 100%; display: inline-flex; justify-content: flex-start; margin-top: 20px}
.socials > .contenido > div{width: 40px; height: 40px; margin-right: 20px}
.socials > .contenido > div:nth-child(1){background: url(../img/logo-ig.svg) center center no-repeat; background-size: cover}
.socials > .contenido > div:nth-child(2){background: url(../img/logo-tw.svg) center center no-repeat; background-size: cover}
.socials > .contenido > div:nth-child(3){background: url(../img/logo-fb.svg) center center no-repeat; background-size: cover}

footer{border-top: 1px solid white; color: white; font-size: 12px; padding: 8px 20px 8px 20px; position: absolute; bottom: 0; left: 0; width: 100%; text-align: center}

@media screen 
and (max-width : 1367px) 
and (min-width : 1024px) 
{
    .info h1{font-size: 60px}
    .info{width: 600px;bottom: 60px;}
}


@media screen 
and (max-width : 1023px) 
and (min-width : 768px) 
{
    .info h1{font-size: 50px}
    .info{width: 640px; bottom: 80px;}
    .info h2{font-size: 20px}
}

@media screen 
and (max-width : 767px) 
{
    .info h1{font-size: 40px}
    .info{width: calc(100% - 80px); bottom: auto; margin-left:40px;position: relative;left: auto; padding-top: 180px;}
    .info h2{font-size: 20px}
    header > div:nth-child(2){padding: 20px 0px 20px 40px;}
    header > div:nth-child(2) img {width: 200px;}
}