/* RESET */
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,font,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 { margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;} body { line-height: 1em; } ol,ul { list-style: none; } 
blockquote,q {quotes: none;}blockquote:before,blockquote:after,q:before,q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } 
* {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;outline: none!important;}
html { font-size:13px; overflow-x:hidden;box-sizing: border-box;}
/* NORMALIZE 8.0.0*/
html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}h1{font-size:2em;margin:0.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:0.35em 0.75em 0.625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;/* 3 */ white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}
.clearfix:before,.clearfix:after {	content: " ";	display: table;}
.clearfix:after {clear: both;}
.clearfix {	*zoom: 1;}
.clear {clear: both;}

* {font-family:'Roboto',sans;
-webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  }

#overlay {display:none;background-color:rgba(0,0,0,.8);position:relative;position:fixed;width:100%;height:100%;top:0;left:0;bottom:0;right:0;}
#overlay #close {position:absolute;top:10px;right:10px;width:40px;height:40px;display:inline-block;line-height:40px;color:#fff;text-decoration:none;text-align: center;font-size: 30px;background: #f15a29;}
#overlay #image img {position:fixed;top:50%;left:50%;transform: translate(-50%, -50%);max-width: 80%;}

@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page {
    margin: 0.5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}

b {font-weight:400;background: rgba(0,0,0,.3);box-shadow: 0 0 5px rgba(0 ,0,0,.5);padding-left: 5px;border-radius:5px;}

html,body { background-color:#231f20; color:#fff}

.wrapper {max-width: 1350px;margin:0 auto;}

header {background:transparent url(img/850in-bigm.jpg) center center no-repeat;background-size:cover;height: 90vh;padding: 3%;position:relative}
header .logo {text-align:left;padding:0;}
header .logo img {width:33%;max-width:200px;}
header .label {width:94%;text-align:center;font-weight:700;
text-transform:uppercase;font-size:1.5rem;bottom:20px;position:absolute}
header .label a {color:#f15a29;;text-decoration:none;display:inline-block;text-shadow:0 0 5px #fff;background:rgba(255,255,255,.5);box-shadow:0 0 20px #fff;padding:5px;border-radius:5px;}
h1 {line-height:2.5rem;font-size:2rem;text-align:right;text-shadow:0 0 5px #fff;}
h2 {line-height: 2rem;font-size: 1.3rem;text-align:right;color:#f15a29;text-shadow: 0 0 5px #000;}
h2 span b {font-weight:700;}
h1 b {font-weight:300;}

.main {display:flex;flex:0 auto;flex-direction:column}
.main .text {order:1;padding:3%;font-size:1.5rem;line-height:2rem;font-weight:300;}
.main .text p {padding-bottom:20px;}
.main .pics {order:2;display:flex;align-items:center;justify-content:space-around;padding:3% 0;flex-wrap:wrap}
.main .pics #tooltip {width:100%;text-align:center;padding:20px 0 20px 0 }
.main .pics a {flex:0 auto; width:23%}
.main .pics a img {width:100%;height:auto;border:1px solid #f15a29}

.arancio {background:#f15a29 url(./img/arancio.jpg) 0 0 no-repeat;background-size:cover;color:#fff;padding:3%}
.arancio .form .titolo h2 {color:#fff;font-size:2rem;line-height:3rem;font-weight:normal;text-shadow:none;padding-bottom: 20px;}
.arancio .formcontainer label {display:block;/* text-align: right; */padding:0 0 20px 0;font-size:1.5rem;}
.arancio .formcontainer label span {display:block;width:100%; padding-bottom:1rem;}
.arancio .formcontainer label input {width:100%;font-size:1.5rem;line-height:2.5rem;border:0;padding:0 10px;}
.arancio .formcontainer .action label input {width:30px;padding:10px;display:inline-block;}
.arancio .formcontainer .action label {font-size:1rem;line-height:1.5rem;}
.arancio .formcontainer .action label.testo {font-size:1.5rem;line-height:1.5rem;margin-top:10px;}
.arancio .formcontainer .action a {color:#fff;text-decoration:underline;}
.arancio .formcontainer .action a.btn {text-decoration:none;display:block;width:100%;text-align:center;font-size:1.5rem;line-height:2.5rem;font-weight:700;padding:0 10px;border:1px solid #fff}
.arancio .formcontainer .action textarea {width:100%;font-size:1.5rem;line-height:2.5rem;border:0;padding:0 10px;height: 100px;resize: none;}

.arancio .formcontainer .output {padding-bottom:20px;font-size:1.5rem;text-align:right;}

.arancio .formcontainer label {text-align:right;position: relative;}
.arancio .formcontainer label.error {text-align:right;background: #fff;display:inline-block;color: #f00;font-size:1rem;line-height:1.5rem;padding:0 5px;position: absolute;bottom: 25px;right: 0;}

footer {padding:50px 20px;text-align:center; border-bottom:2px solid #e94e1b; margin-bottom:50px;}
footer img {max-width:150px;}

/* DESKTOP O IPAD ORIZZONTALE */
@media only screen and (min-width: 1024px) {

  header {height:100vh;max-height:768px; background-image:url(./img/850in-big.jpg)}
  header .logo {width:150px;}
  header .logo img {width:150px;padding-top:20px}
  header .titolo {position:relative;top:-70px;}
  header .titolo h1 {font-size:3rem;line-height:4rem;}
  header .titolo h2 {font-size:2rem;line-height:3rem;font-weight: 500;}
  header .titolo h2 span {font-weight:700;display:block}

  .main {flex-direction:row;padding:50px 80px}
  .main .text {width:70%; border-right:2px solid #f15a29;
  padding-right:80px;}
  .main .text p {font-size:2rem;line-height:2.5rem}
  .main .pics #tooltip {display:none}
  .main .pics {flex-direction:column;padding-left:80px}
  .main .pics a {width:80%}
  .main .pics a img {border:2px solid #f15a29;opacity:.9;    cursor: -moz-zoom-in; 
    cursor: -webkit-zoom-in; 
    cursor: zoom-in;}
  .main .pics a img:hover {border:2px solid #fff;opacity:1}

  .arancio  {position:relative}
  .arancio .titolo h2 { text-align:left; }
  .arancio .titolo {position:absolute;width:300px;top:3%;left:3%;}
  .arancio .formcontainer { width:60%;margin-left:40%}
  .arancio .formcontainer label span {display:inline-block;width:49%;text-align:right;padding-right: 20px;}
  .arancio .formcontainer label input {display:inline-block;width:50%;}
  .arancio .formcontainer label.error {bottom:initial;top: 6px;}
  .arancio .formcontainer .action {position:absolute;bottom:3%;left:3%;}
  .arancio .formcontainer .output {padding-bottom:0px;} 

}


/* DESKTOP O IPAD ORIZZONTALE */
@media only screen and (min-width: 1200px) {
  header {background-image:url(./img/850in-big1200.jpg);}
  header .logo img {width:180px;padding-top:20px}
  header .titolo {top:-90px;}
  .main {padding-left:120px;padding-right:120px}
  .main .text {padding-right:100px}
  .main .text p {padding-bottom:40px;}
  .main .pics {padding-left:100px}
  .main .pics a {margin-bottom:50px;}
  
  .arancio  {position:relative}
  .arancio .titolo h2 { text-align:left; }
  .arancio .titolo {position:absolute;width:300px;top:3%;left:3%;}
  .arancio .formcontainer { width:60%;margin-left:40%}
  .arancio .formcontainer label span {display:inline-block;width:49%;text-align:right;padding-right: 20px;}
  .arancio .formcontainer label input {display:inline-block;width:50%;}
  .arancio .formcontainer .action {position:absolute;bottom:3%;left:3%;}
  .arancio .formcontainer .output {padding-bottom:0px;} 

}