*, *:before, *:after { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box }
body,html   { margin:0px; padding:0px; width:100%; height:100%; font-family:Open Sans; font-weight:400; font-size:1em; line-height:1.4em; -webkit-tap-highlight-color:rgba(0,0,0,0) }
div,span    { position:relative; font-family:Open Sans; font-weight:400; font-size:1em; line-height:1.4em  }
a           { color:#FF412D; text-decoration:none }
img         { position:relative; border:none }
h1,h2,h3    { margin:0; font-weight:700; line-height:0.9em }
h1          { margin-bottom:1em }
input,textarea  { font-family:Open Sans; font-size:1em }
input:focus     { outline:0 }
.clear          { clear:both }
.bottone        { border:solid 1px #ffffff; border-radius:0.3em; background:#153F79; color:#ffffff; padding:0.5em 1.5em 0.5em 1.5em }
.bottone:hover  { cursor:pointer; background:#4B5C66 }

.top                      { z-index:100; padding:3em 15em 2.5em 15em }
.top .dx                  { float:right; text-align:right }
.logo-bee                 { float:left; height:4.5em } 
.logo-bee.black           { display:none } 
.mobile-hamburger         { display:none; z-index:100; position:absolute; top:2.1em; right:2em; height:1.9em }

.top-lingue                 { display:block; margin-top:-0.2em; padding:0; list-style-type:none  }
.top-lingue li              { display:inline; margin-left:0.6em; padding-left:0.6em; font-size:1.1em; text-transform:uppercase; font-size:0.8em; border-left:solid 1px #ffffff }
.top-lingue li a            { color:#ffffff }
.top-lingue li a:hover      { color:#ffffff; border-bottom:solid 3px #FF412D }
.top-lingue li:first-of-type { border:0 }

.top-menu                 { display:block; margin-top:1.4em; padding:0; list-style-type:none  }
.top-menu li              { display:inline; margin-left:1.5em; font-size:1.1em }
.top-menu li a            { color:#ffffff }
.top-menu li a:hover      { color:#ffffff; border-bottom:solid 3px #FF412D }
.top-menu li:last-of-type a:hover      { border-bottom:0 }
.ico-facebook               { height:1.1em; top:0.2em } 
.top-menu li:nth-of-type(5) { display:inline-block }
.top-menu li:nth-of-type(6) { display:none }

.menu-attivo { color:#ffffff; border-bottom:solid 3px #FF412D} 

.cover-source { display:none }

.top-nero .top-menu   li a            { color:#000000 }
.top-nero .top-lingue li a            { color:#000000 }
.top-nero .top-menu li:nth-of-type(5) { display:none }
.top-nero .top-menu li:nth-of-type(6) { display:inline-block }
.top-nero .logo-bee.white             { display:none } 
.top-nero .logo-bee.black             { display:block } 

.top-arancione .top                        { background:#FF412D }
.top-arancione .top-menu   li a            { color:#ffffff }
.top-arancione .top-lingue li a            { color:#ffffff }
.top-arancione .top-menu li:nth-of-type(5) { display:inline-block }
.top-arancione .top-menu li:nth-of-type(6) { display:none }
.top-arancione .logo-bee.white             { display:block } 
.top-arancione .logo-bee.black             { display:none } 
.top-arancione .menu-attivo                { border-color:#ffffff } 

.pagina              { margin-left:15em; margin-right:15em; padding-bottom:5em }
.pagina-progetto     { margin-left:15em; margin-right:15em; padding-bottom:5em }
.pagina .titolo      { margin-top:4em }
.pagina-intro        { margin-left:15em; margin-right:15em; padding:5em 0 10em 0 }
.pagina-intro .frase { font-size:2.5em; font-weight:300; line-height:1.2em; color:#FF412D }
.pagina-intro .frase.nero { color:#000000 }
.pagina-intro .frase.medio { font-size:1.3em; line-height:1.5em }
.pagina-intro .frase .ico     { margin:1em; text-align:center }
.pagina-intro .frase .ico img { height:4em; opacity:0.4 }
.pagina-grafica      { text-align:center; padding-bottom:10em }
.pagina-grafica img  { margin-bottom:7em; width:100% }

.box-expertise                { float:left; width:37%; min-height:25em; padding:3em; background:#EBEBEB }
.box-expertise span            { font-weight:300; font-size:1.2em }
.box-expertise:nth-child(1)   { padding-left:15em; }
.box-expertise:nth-child(2)   { width:26%; background:#F5F5F5 }
.box-expertise:nth-child(3)   { padding-right:13em; background:#EBEBEB }
.box-expertise:nth-child(4)   { padding-left:15em; background:#F5F5F5 }
.box-expertise:nth-child(5)   { width:26%; background:#EBEBEB }
.box-expertise:nth-child(6)   { padding-right:13em; background:#F5F5F5 }
.box-expertise h1              { width:100%; font-size:1.5em; font-weight:500; line-height:1em; color:#FF412D; height:1.5em  }

@media (max-width:1400px) { 
   .top               { padding-left:10em; padding-right:10em }
   .pagina            { margin-left:10em; margin-right:10em }
   .pagina-progetto   { margin-left:10em; margin-right:10em }
   .pagina .titolo    { margin-top:4em }
   .pagina-intro      { margin-left:10em; margin-right:10em }
   .box-expertise:nth-child(1)   { padding-left:10em  }
   .box-expertise:nth-child(3)   { padding-right:8em }
   .box-expertise:nth-child(4)   { padding-left:10em  }
   .box-expertise:nth-child(6)   { padding-right:8em }
}
@media (max-width:1200px) { 
   .top               { padding-left:5em; padding-right:5em }
   .pagina            { margin-left:5em; margin-right:5em }
   .pagina-progetto   { margin-left:5em; margin-right:5em }
   .pagina .titolo    { margin-top:4em }
   .pagina-intro      { margin-left:5em; margin-right:5em }
   .box-expertise     { width:calc(100%/2)  }
   .box-expertise:nth-child(n)   { width:calc(100%/2) }
   .box-expertise:nth-child(1)   { padding-left:5em  }
   .box-expertise:nth-child(3)   { padding-right:3em }
   .box-expertise:nth-child(4)   { padding-left:3em  }
   .box-expertise:nth-child(6)   { padding-right:3em }
}

.mobile-menu   { display:none; z-index:1000; position:fixed; top:0; left:0; width:100%; height:100%; color:#ffffff; padding:4em 0 2em 0; background:#FF412D; margin:0; text-align:center; line-height:3em; font-size:1.2em }
.mobile-menu a { color:#ffffff }
.close         { z-index:100; height:1.2em; position:absolute; top:2em; right:1.8em }

@media (max-width:800px) { 
   .top               { padding:2em }
   .logo-bee          { height:3.5em } 
   .top-menu          { display:none }
   .top-lingue        { display:none }
   .mobile-hamburger.white  { display:block }
   .top-nero .mobile-hamburger.white  { display:none }
   .top-nero .mobile-hamburger.black  { display:block }
   .linguetta         { display:none }
   .pagina            { margin-left:2em; margin-right:2em }
   .pagina .titolo    { margin-top:4em }
   .pagina-intro      { margin-left:2em; margin-right:2em; padding-top:1em; padding-bottom:5em }
   .pagina-intro .frase { font-size:1.5em }
   .pagina .home-intro h1     { font-size:2em }
   .pagina .home-intro .frase { font-size:1.2em }
   .pagina-grafica img  { margin-bottom:3em }
   .pagina-progetto    { margin-left:2em; margin-right:2em;  }
   .box-expertise     { width:calc(100%/1)  }
   .box-expertise:nth-child(n)   { width:calc(100%/1); min-height:auto; padding:2em }
}

.home-foto               { width:100%; height:65%; background-position:center top; background-repeat:no-repeat; background-size:cover }
.home-foto .linguetta    { position:absolute; bottom:0; right:14em; font-size:1.1em; font-weight:600; padding:1em 7em 1em 1em; color:#ffffff; background:rgba(255,65,45,0.7) url(ico/arrow-right.svg) no-repeat; background-position:calc(100% - 1em) 50%; background-size:auto 1.3em }
.progetto-foto            { width:100%; height:85%; background-position:center top; background-repeat:no-repeat; background-size:cover }
.progetto-nome            { display:table; margin:-1.5em 0 0 -1em; padding:0.5em 1em 0.5em 1em; font-size:2.5em; font-weight:700; color:#FF412D; background:#ffffff }
.progetto-descrizione     { font-size:1.2em; font-weight:300; margin:4em 0 2em 0 }
.progetto-descrizione a   { font-weight:500 }
.progetto-dettaglio1      { float:right; margin-left:8em }
.progetto-galleria        { width:100%; text-align:center; margin-bottom:5em }
.progetto-galleria img    { margin-top:7em; width:100% }
@media (max-width:1400px) { 
    .home-foto .linguetta    { right:9.5em }
}
@media (max-width:1200px) { 
    .home-foto .linguetta    { right:4.5em }
}
@media (max-width:800px) { 
   .home-foto              { height:18em }
   .progetto-foto          { height:18em  }
   .progetto-descrizione   { margin-top:2em; margin-bottom:0  }
   .progetto-nome          { width:calc(100% + 1em); font-size:1.6em; margin:-2em 1em 0 -0.5em; padding-left:0.5em; padding-top:1em }
   .progetto-dettaglio1    { float:none; display:block; margin:0 0 3em 0; max-height:12em}
   .progetto-galleria      { margin-bottom:0 }
   .progetto-galleria img  { margin-top:3em }
}

.ico-link { height:1.1em; top:0.2em; margin-right:1em }

.home-intro              { padding:5em 0 3em 0 }
.home-intro  h1          { font-size:3em; color:#FF412D }
.home-intro  .frase      { font-size:2.5em; font-weight:300; line-height:1.2em }
.home-intro  .cit        { position:absolute; font-size:3em; font-weight:800; color:#FF412D }
.home-intro  .cit.aperto { top:-0.8em }
.home-intro  .cit.chiuso { display:inline-block; margin-left:0.3em }
.home-intro  .testo      { font-weight:300; font-style:italic; line-height:1.2em }
.home-intro  .autore     { margin-top:2em; font-size:0.6em; opacity:0.4 }

.home-progetti  { margin-bottom:7em }
.home-progetto  { float:left; width:calc(100%/4); height:18em; background:center center no-repeat; background-size:cover; overflow:hidden }
@media (max-width:1300px) { 
   .home-progetti  { margin-bottom:3em }
   .home-progetto  { width:calc(100%/3) }
}
@media (max-width:900px) { 
   .home-progetto  { width:calc(100%/3); height:12em  }
}
@media (max-width:450px) { 
   .home-progetto  { width:calc(100%/2); height:12em }
}

.footer         {   }
.footer .box                           { width:50%; float:left; padding-top:4em; padding-bottom:4em; height:20em }
.footer .box1                          { background:#FF412D; color:#ffffff; padding-left:10em; line-height:2em; padding-left:15em }
.footer .box1 a                        { color:#ffffff }
.footer .box1 .logo-bee-visual-design  { height:2.5em; margin-bottom:1.6em }
.footer .box2                          { background:rgba(0,0,0,0.10); text-align:right; padding-right:10em; line-height:1.6em; padding-right:15em }
.ico-map                               { height:0.9em; margin-right:1em }
.ico-phone                             { height:0.9em; margin-right:1em }
.ico-fb                                { height:0.9em; margin-right:1em }
@media (max-width:1400px) { 
 .footer .box1  { padding-left:10em }
 .footer .box2  { padding-right:10em }
}
@media (max-width:1200px) { 
 .footer .box1  { padding-left:5em }
 .footer .box2  { padding-right:5em }
}
@media (max-width:800px) { 
 .footer .box1 { padding:3em 0 3em 2em; height:auto }
 .footer .box2 { padding:3em 0 3em 2em; height:auto }
 .footer .box   { float:none; width:100%; text-align:left }
}