/* -------------------------------- 

Primary style

-------------------------------- */
svg {
  max-width: 100%;
}

/* -------------------------------- 

Patterns - reusable parts of our design

-------------------------------- */
.cd-btn {
  display: inline-block;
  padding: 1em 2em;
  color: #3d3737;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.no-touch .cd-btn:hover {
  color: #3d3737;
  opacity:0.5;
}

.centro{text-align:center;padding:50px;}
.content-modal{width:30%;float:left;display:inline-block;padding:20px;}
.img-modal{border-radius:10px;box-shadow: 5px 10px 20px 5px #000000;}
.colonne-modal{width:48%;float:left;}
.contenitore-articoli{width:100%;display:inline-block;}
.testi-modal{color:#FFFFFF;}
.mooodaaal{width:60%;margin:0 auto;}
.pulsante-carrello{padding:10px;font-size:18px;background:#fff7f7;font-family:Glory;color:#444444;border:#fff7f7;box-shadow: 5px 5px 20px 0px #222222;border-radius:5px;}
.pulsante-carrello:hover{color:#2d354c;background:#eaeaea;}
.prodotto-scelto{border-bottom:2px solid #a7c4de;}
.riepilogo-ordine{border:2px solid red;padding:10px;text-align:left;}
.riepilogo{font-family:'Halant';text-align:center;font-size:20px;}
#invio-riepilogo{background:#333333;font-family:'Glory';font-size:20px;padding:10px;border-radius:5px;color:#FFFFFF;}
#invio-riepilogo:hover{background:#FFFFFF;color:#000000;}
.errore{color:#ff0000;font-size:25px;font-family:'Halant';}
.content-modal p{font-family:Halant;color:#FFFFFF;font-size:20px;}

#carrello{border:1px solid #2d354c;padding:20px;background:#f2f3f7;border-radius:2px;}


/* -------------------------------- 

Main Content

-------------------------------- */
.cd-main-content-modal {
  position: relative;
  width: 100%;
  height: 100%;
  display: table;
}
.cd-main-content-modal .center {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.cd-main-content-modal h1 {
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 1em;
}
@media only screen and (min-width: 768px) {
  .cd-main-content-modal h1 {
    font-size: 4rem;
    font-weight: 300;
  }
}

/* -------------------------------- 

Modal Window

-------------------------------- */
.cd-modal {
  position: fixed;
  z-index: 3;
  top: 0px;
  left: 0;
  height: 100%;
  width: 100%;
  visibility:hidden;
  /*display:none;*/
  -webkit-transition: visibility 0s 0.6s;
  -moz-transition: visibility 0s 0.6s;
  transition: visibility 0s 0.6s;
}
.cd-modal svg {
  position: absolute;
  top: 0;
  left: 0;
}
.cd-modal svg > path {
  fill: #2d2d2d;
}
.cd-modal .modal-close {
  /* 'X' icon */
  position: absolute;
  z-index: 1;
  top: 20px;
  right: 5%;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3) url(cd-icon-close.svg) no-repeat center center;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  /* Force hardware acceleration*/
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
  -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
  transition: transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
}
.no-touch .cd-modal .modal-close:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.cd-modal.modal-is-visible {
  visibility: visible;
  /*display:block;*/
  -webkit-transition: visibility 0s 0s;
  -moz-transition: visibility 0s 0s;
  transition: visibility 0s 0s;
}
.cd-modal.modal-is-visible .modal-close {
  visibility: visible;
  opacity: 1;
  -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
  -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
  transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.cd-modal-content {
  position: relative;
  height: 100vh;
  overflow-y: auto;
  padding: 3em 5% 4em;
  opacity: 0;
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -o-transform: translateY(50px);
  transform: translateY(50px);
  -webkit-transition: opacity 0.3s 0s, -webkit-transform 0.3s 0s;
  -moz-transition: opacity 0.3s 0s, -moz-transform 0.3s 0s;
  transition: opacity 0.3s 0s, transform 0.3s 0s;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cd-modal-content p {
  color: #f2f2f2;
  line-height: 1.6;
  margin: 2em 0;
  font-size:20px;
  font-family:'Halant';
}
.modal-is-visible .cd-modal-content {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-overflow-scrolling: touch;
  -webkit-transition: opacity 0.3s 0.3s, -webkit-transform 0.3s 0.3s;
  -moz-transition: opacity 0.3s 0.3s, -moz-transform 0.3s 0.3s;
  transition: opacity 0.3s 0.3s, transform 0.3s 0.3s;
}
@media only screen and (min-width: 768px) {
  .cd-modal-content {
    padding: 3em 10% 4em;
  }
}

/* -------------------------------- 

 Cover Layer - hide main content when modal is fired

-------------------------------- */
.cd-cover-layer {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #FFFFFF;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.3s 0.3s, visibility 0s 0.6s;
  -moz-transition: opacity 0.3s 0.3s, visibility 0s 0.6s;
  transition: opacity 0.3s 0.3s, visibility 0s 0.6s;
}
.cd-cover-layer.modal-is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

@media screen and (max-width: 1400px) {
.content-modal{width:50%;float:left;display:inline-block;padding:20px;margin:0 auto;}
.mooodaaal{width:100%;}
}

@media screen and (max-width: 800px) {

.content-modal{width:100%;float:left;display:inline-block;padding:20px;}
.colonne-modal{width:100%;float:left;}
.contenitore-articoli{width:100%;display:inline-block;}

}