/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
* {box-sizing:border-box;}

body {margin:0; font-family:'Roboto Slab', serif; box-sizing: border-box; background-color:#f7f7f7;}
img {max-width:100%;}
.centered {text-align:center; margin:0 auto;}

p {font-size:23px;}

a {color:#ffe57b;}

.trans {
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}

header {background: url(../img/bg.jpg) no-repeat; background-size: cover; background-attachment: fixed; overflow:hidden; background-color:#fde686;}

header h1 {height:0; text-indent:-99999999999px; margin:0;}

#scena {width:100%; height:100%;  height:400px;  margin-top:-50px; }

header .title {position:absolute; top:70px; display:block; padding-left:5%;}

header .pres {display:block; margin:0 auto; margin-top:200px;}

header .sinistra {margin-left:-50px; }
.uccello img {margin-left:50px; }

.giallo {color:#ffe57b;}
.container {width:1200px; max-width:100%; margin:0 auto; position:relative;}
.top {background-color: #fff; display:table; height:78px; width:100%; position:fixed; z-index:9;}
.top img {float:left; margin-top:20px; margin-left:25px;}
a.bottone {display:table-cell; vertical-align: middle; width:280px; text-align:center; color:#414042; background:#a7cee0 url(../img/carrello.svg) no-repeat 16%; background-size:12%; font-size:20px; text-decoration:none; padding-left:30px;}
.top a:hover {background-color: #ffe57b;}

.top a.bottone {border-bottom: 1px solid #fff;}

.top .lingue {background-color:#414042; color:#fff; text-transform: uppercase; width:80px; display:table-cell; vertical-align: middle; text-align:center; border-bottom: 1px solid #fff;}
.top .lingue a {color:#fff; text-decoration: none; background-color: transparent;}
.top .lingue .active, .top .lingue a:hover {color:#ffe57b; }

.top h2 {text-align:right;  display:table-cell; vertical-align:middle; text-shadow: 4px 4px 0px #ffe57b; font-size:26px; background: url(../img/freccia.svg) no-repeat right 20px center; background-size: 4%; padding-right:60px;}

.intro {width:90%; margin:100px 0 120px 10%; position:relative;}
.intro p {font-size:20px; width:50%;}
.intro a, .uno a {color:#414042; text-decoration: none;}
.acquista a.bottone { background:#414042 url(../img/carrello-g.svg) no-repeat 16%; background-size:12%;  color: #ffe57b; padding:10px 30px 10px 60px; border-radius:50px; display: inline-block; width:auto; font-weight:300;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.intro .press {position:absolute; right:-10%; top:0px; margin-top:70px;}
.intro .flash {position:absolute; right:103px; top:42px; display:none;}

.intro a.bottone,
.recensioni a.bottone
{background-size:12%; background:#414042; color: #ffe57b;padding:10px 25px; border-radius:50px; display: inline-block; width:auto; font-weight:300;}


main {width:100%; float:left; overflow:hidden; position:relative;}
.fascia {width:100%; float:left; overflow:hidden; position:relative;}
.grigia {background-color:#f7f7f7;  color:#414042;}
.bollo {float:left; width:200px; height:200px; border-radius: 50%; background-size: cover; text-align:center; font-size:23px; font-weight:700; padding-top:3%; box-sizing: border-box; margin:60px 45px 60px 10px;}
.bollo {background-image: url(../img/bg.jpg); }
.bollo.b {background-image: url(../img/bollo2.png); }
.bollo.c {background-image: url(../img/bollo3.png); }
.bollo span {font-size:60px;}

#ordina {padding:70px 0 0px 0;}
#ordina .container {overflow:hidden;}
.scatola {width:33.3%; float:left;  box-sizing: border-box;}
.scatola img {width:80%;}
.acquista {width:66%; float:left; padding-left:28px; box-sizing: border-box;}
.acquista .codice {font-size:25px;}
.prezzo {font-size:34px; display:inline-block; position:relative;}
.scontato {display:inline-block; margin-left: 20px; font-size:34px; }
.acquista p {margin:0;}
.prezzo img { width:100%; height:100%; position: absolute; top:0; left:0;
  /* Rotate div */
  -ms-transform: rotate(-30deg); /* IE 9 */
  -webkit-transform: rotate(-30deg); /* Safari 3-8 */
  transform: rotate(-30deg);
}
.acquista .info {color:#777; font-size:12px; line-height:14px;}
.acquista .bottone {margin:20px 0;}
.acquista .bottone:hover, .intro .bottone:hover {background-color: #000;}

.recensioni .container {
  overflow: hidden;
  margin-top: 30px;
  margin-bottom: 60px;
}
.recensioni .col-1-3 {
  float:left;
  width: 33.3%;
}
.recensioni .col-2-3 {
  float:left;
  width: 66.6%;
  padding-left: 28px;
}
.recensioni .videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}
.recensioni .videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.avviso {
  width: 130px;
  height: 130px;
  border-radius: 65px;
  text-align: center;
  position: absolute;
  top: 75%;
  right: 5%;
  border: 3px solid rgb(60,60,60);
  color: rgb(60,60,60);
  font-weight: 700;
  font-size: 20px;
  padding: 12px 10px;
  transform: rotate(15deg);
  z-index: 1000;
}
.contenuto .elenco ul li {line-height:24px;}
.contenuto .bolli .bollo {width:170px; height:170px; margin:10px 7% 10px 0; font-size:16px; float:left; padding-top:6%;}
.contenuto .bolli .bollo span {font-size:36px; line-height:33px;}

.contenuto {position:absolute; z-index:8; right:0; height:auto;}
ul {list-style-type: none; padding-left: 0;}

.uno {background-color:transparent;  position:relative;}
.uno .contenuto {position:relative; overflow:hidden; }
.uno .contenuto .bolli {width:66.6%; float:left; box-sizing:border-box; padding:53px 0 20px 40px;}
.uno .contenuto .elenco {width:33.3%; float:left; padding:0px 28px 40px 79px; box-sizing:border-box; margin-bottom:0; background-color:#fff;}
.uno .contenuto .elenco ul {float:left; margin-top:6px; width:100%; box-sizing:border-box;}
.uno .contenuto .elenco ul li {line-height:24px;}
.contenuto .elenco strong {display:block;}

.uno p {margin:15px 0 0 20px;}
.uno .cranio {float:left; width:10%; padding-top:21px;}
.cranio img {width:100%; max-width:120px;}

.uno .bg-white {background-color: #fff; position: absolute; right:0; top:0; bottom:0; width:30%;}
#ordina .bg-white {background-color: #fff; height:59px; position: absolute; right:0; bottom:0; width:33.3%;}

.scura .bx-viewport {min-height: 230px;}


.scura {background-color:#414042; color:#fff; padding-bottom:30px;}
.grigia.list .container {margin-top:30px; margin-bottom:60px;}
.grigia .eventi {width:66.6%;}
.grigia .eventi li {color:#414042; width:44%; float:left; border-top:2px solid #777; padding:41px 28px 20px 28px; box-sizing: border-box; margin-bottom:20px; margin-right:12%;}
.grigia .eventi a:nth-child(2n+0) li {margin-right:0;}
.grigia .eventi { position: relative; overflow:hidden; /*background:url(../img/riga.png) no-repeat left;*/}
.grigia .evento .data {color:#ffe57b; font-size:25px;}
.grigia .evento strong {font-size:20px; display:block; margin-bottom:30px;}
.grigia .evento strong a, .grigia .evento strong a {font-size:16px; color:#777;}
.grigia .bx-wrapper {margin-bottom:90px; }
.grigia .foto {height:700px;}

.grigia .eventi .bottone { color: #ffe57b; padding:10px 30px; border-radius:50px; display: inline-block; width:auto; text-transform: uppercase; background-color: #414042;}


.grigia .title { color:414042; font-weight: 600; padding:0px 10% 0 0; margin:0; width:33.3%; float:left; box-sizing:border-box;}
.grigia .title p {font-size: 26px;margin-top:0;}

.scura.video {padding:70px 0 50px;}
.scura.video .wrap {float:left; width:66.6%; padding-left:28px;box-sizing:border-box;}
.scura.video video {}

.scura.video .elenco { float:left; width:33.3%; box-sizing:border-box; padding-top:5%;}
.scura.video .elenco .cranio {width:30%;  float:left; display: block;}
.scura.video .elenco p { font-weight: 300; font-size:21px; display:inline-block; max-width:250px; margin-left:10px;}

.scura .bx-wrapper .bx-pager {margin-top:50px;}

.grigia .eventi a:hover .dove {color:#ffe57b;}
.grigia .eventi a:hover .bottone {background-color: #000;}


.bianca .eventoprova {color:#414042;}


.grigia ul {overflow:hidden; margin:0;}

.scura .carousel {border:0; box-shadow:none; background: #414042 url(../img/riga.png) no-repeat left 64%; }
.scura .bx-wrapper {background-color:#414042; border:none; box-shadow:none; }

.foto .bianco {position:absolute; left:0;bottom:0; background-color: #fff; height:50px; width:33.3%;}

.prove .eventoprova {width:auto; float:left;  box-sizing: border-box; padding:0px 29px; }

.bianca ul.eventi.prove {padding-top:40px; overflow:hidden;}

.prove .eventoprova:first-child { padding-left:0;}

.bianca .evento {background:url(../img/rigan.png) no-repeat right; }

.bianca p.giallo {color:#414042; font-size:20px; }
.prove .eventoprova a {border-bottom: 3px solid #ffe57b; text-decoration: none; display:inline-block; font-size:20px; color:#414042; margin-top:20px;}


.foto .bx-wrapper img {width:100%; }
.foto .bx-wrapper .bx-pager {bottom:30px;}
.foto .bx-wrapper {border:0; margin-bottom:0; height:700px;}
.bx-wrapper .bx-pager.bx-default-pager a.active {background-color:#ffe57b;}

.bx-wrapper .bx-controls-direction a {display:none;}

.form p {margin-bottom:0;}
p.small {font-size:20px; font-weight:300; margin-top:0; margin-bottom:40px;}

.form {margin-left:10%; width:80%; overflow:hidden; padding-bottom:120px;}

form .camp {width:49%; float:left; margin:0px 0 20px 1%;
}

form .camp.left {margin:0px 1% 20px 0;}

form .camp input {width:100%; padding: 10px; margin-top:10px;
font-size: 18px;
background-color: #2a2929;
border: 0;
box-sizing:border-box;
color:#ffe57b;
font-family:'Roboto Slab', serif;}

form .camp input[type='checkbox'] {
  width:auto;
  margin:0 10px 0 0;
}

form .camp button {padding:10px 24px; background-color:#ffe57b; border:0; font-family:'Roboto Slab', serif; font-size:16px; font-weight:500; border-radius:30px; float:right; font-size:20px; color:#414042; }
form .camp button:hover {background-color: #a7cee0;}
.half {width:50%; float:left;}
.terzo { width:33.3%; float:left;}
.right {width:66.6%; float:right;}

.contatti {margin-top:0;}
.contatti p {font-size:20px; line-height: 28px; margin:0;}
.contatti .contenuto {position:relative; box-sizing: border-box; display:table; height:255px; padding:22px 67px 13px 77px; background-color: #fff;}
.contatti .contenuto p {display:block; width:100%; }
.contatti .contenuto a {color:#272727; text-decoration: none;}
.contatti .right {padding:50px 0 41px 53px; box-sizing: border-box;}
.contatti .right p {width:70%; float:left;}
.contatti .loghi a {padding:30px 20px; display:block; float:left; box-sizing:border-box; max-width:50%;}
.contatti .loghi a:first-child {border-right:1px solid #414042;}

.contatti .contenuto a.giallo {border-bottom:3px solid #ffe57b; }

.contatti .loghi {width:30%; overflow:hidden;}

footer {background-color:#272727; color:#fff; float:left;position: relative; width:100%; padding:77px 0;}
.corporate, .contacts, .disclaimer {float:left; width:33.3%; font-size:16px;}
.disclaimer p { color:#666; font-size:16px;}

footer p {margin:0;}
footer a {color:#fff;}

.top a.bottone.mobile {display:none;}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        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) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

@media only screen and (max-width:1024px) {
  p {font-size:16px;}
  .container {width:90%; margin-left:5%;}
  .contenuto {position:relative;}
  .no-mobile {display:none !important;}
  .top a.bottone {background-color: #a7cee0; padding-left:0;}
  .top img {margin-left:5%;}
  a.bottone {width:auto; font-size:16px;}
  img.pres {max-width:80%;}
  main {margin-top:0;}
  .bollo {width:100%; margin:0 10px 10px; padding-top:10%;}
  .terzo, .right {width:100%;}
  .contatti .contenuto {padding-left:10%;}
  .contenuto {padding-left:5%;}
  .contatti .right p {width:100%; margin-bottom:20px;}
  footer {padding:70px 0;}
  .corporate, .contacts, .disclaimer {width:90%; margin-bottom:10px;}
  .scura p {margin-left:0;}

  header .pres {margin-top:110px;}
  #scena {height:180px; margin-top:0;}
  .intro {margin:10% 0;}

  header .title {width:100%; left:0;}

  #ordina.fascia.grigia, .uno {padding:40px 0;}
  .acquista {width:100%; padding-left:0;}
  .scatola {width:60%; margin-left:4%; margin-bottom:20px;}

  .uno .cranio {width:30%; margin:0 5% 20px 0;}
  .uno p {width:65%; margin-left:0;}

  .uno .contenuto {width:100%; border:0; padding:0;}
  .uno .contenuto .bolli {width:100%; margin-bottom:30px; margin-top:30px; padding:0;}
  .uno .contenuto .bolli .bollo { margin:5px 1%; width:31%; border-radius:0; padding-top:3%; background-size: auto;}
  .uno .contenuto .elenco {width:100%;}

  .uno .contenuto .elenco ul {margin:0;}

  .foto .bx-wrapper {height:350px;}

  .uno .contenuto .elenco ul.leftc {margin-right:5%;}

  .contatti .right {padding-left:0;}

  .contatti .right p, .contatti .loghi {width:100%;}

  header {background-size: auto;}

  header .intro {margin-left:5%;}
  .scura .evento strong {font-size:20px;}

  .scatola {text-align:center; width:100%; margin:20px auto;}
  .scatola img {max-width:500px;}

  .top h2 {font-size:20px; max-width:400px;}

  .prove .eventoprova {width:100%;}

  .scura .eventi li {width:100%; margin-bottom:20px;}

  #ordina .bg-white {display:none;}
  .uno .contenuto .elenco {padding-top:40px;}

  .recensioni .container {
    margin-bottom: 30px;
  }
  .recensioni .col-1-3 {
    width: 100%;
  }
  .recensioni .col-2-3 {
    width: 100%;
    padding-left: 0;
  }
  .avviso {top: 56%;}

}

@media only screen and (max-width:768px) {
  #ordina {text-align:center;}
  header h2 {line-height:28px; text-align:center;}
  header .intro {text-align:center;}
  .top {height:40px;}
  .top a.bottone {display:none;}
  .top a.bottone.mobile {color:#a7cee0; width:14%; background-size: 50%; background-position: center;display:table-cell;}
  .top img {margin-top: 10px; margin-bottom: 10px;}
  .top .lingue {width:60px;}
  .top .lingue a {font-size:12px;}
  .intro p {width:100%; font-size:16px;}

  .prove .eventoprova, .scura .eventi li {width:100%; background-image: none;}

  .scura.video .elenco, .scura.video .wrap, .grigia .title, .grigia .eventi li {width:100%;}

  .scura.video {padding-top:34px;}

  .scura.video .wrap {padding-left:0; margin-top:30px;}

  .avviso {display: none;}
}

@media (max-width:1280px) {
  .container { width: 90%; margin-left: 5%; }
  .avviso { bottom: 90px; left: 30px; }
}