@media only screen and (min-width: 0){
    html{font-size: 1rem;}
}
@media only screen and (min-width: 992px){
    html{font-size:1rem;}
}
@media only screen and (min-width: 1200px){
    html{font-size:1rem;}
}



.brand-logo > img{margin-top: 15px; margin-left:20px;}
nav ul a, nav a {color: #616161;}
.dropdown-content li > a, .dropdown-content li > span {color: #616161;}
.sidenav li.logo{text-align: center; padding-top: 10px;}
.collapsible.collapsible-sidenav>li>a{padding: 0px 32px;}
.collapsible.collapsible-sidenav ul>li>a{opacity: .7; padding-left:42px;}
.card{width: 100%;}

/* USO GENERICO */
strong{font-weight: 800;}
small, .small{font-size: 0.8rem;}
.hidden{display: none;}
.rounded{border-radius:.25rem;}
.rounded-left {
    border-top-left-radius: .25rem!important;
    border-bottom-left-radius: .25rem!important;
}
.flex{display: flex;}
.justify-content-center{justify-content: center;}
.align-items-center{align-items: center;}
.align-items-stretch{align-items: stretch;}
/* margin and padding */
m-0{margin:0!important}.mt-0,.my-0{margin-top:0!important}.mr-0,.mx-0{margin-right:0!important}.mb-0,.my-0{margin-bottom:0!important}.ml-0,.mx-0{margin-left:0!important}.m-1{margin:.25rem!important}.mt-1,.my-1{margin-top:.25rem!important}.mr-1,.mx-1{margin-right:.25rem!important}.mb-1,.my-1{margin-bottom:.25rem!important}.ml-1,.mx-1{margin-left:.25rem!important}.m-2{margin:.5rem!important}.mt-2,.my-2{margin-top:.5rem!important}.mr-2,.mx-2{margin-right:.5rem!important}.mb-2,.my-2{margin-bottom:.5rem!important}.ml-2,.mx-2{margin-left:.5rem!important}.m-3{margin:1rem!important}.mt-3,.my-3{margin-top:1rem!important}.mr-3,.mx-3{margin-right:1rem!important}.mb-3,.my-3{margin-bottom:1rem!important}.ml-3,.mx-3{margin-left:1rem!important}.m-4{margin:1.5rem!important}.mt-4,.my-4{margin-top:1.5rem!important}.mr-4,.mx-4{margin-right:1.5rem!important}.mb-4,.my-4{margin-bottom:1.5rem!important}.ml-4,.mx-4{margin-left:1.5rem!important}.m-5{margin:3rem!important}.mt-5,.my-5{margin-top:3rem!important}.mr-5,.mx-5{margin-right:3rem!important}.mb-5,.my-5{margin-bottom:3rem!important}.ml-5,.mx-5{margin-left:3rem!important}.p-0{padding:0!important}.pt-0,.py-0{padding-top:0!important}.pr-0,.px-0{padding-right:0!important}.pb-0,.py-0{padding-bottom:0!important}.pl-0,.px-0{padding-left:0!important}.p-1{padding:.25rem!important}.pt-1,.py-1{padding-top:.25rem!important}.pr-1,.px-1{padding-right:.25rem!important}.pb-1,.py-1{padding-bottom:.25rem!important}.pl-1,.px-1{padding-left:.25rem!important}.p-2{padding:.5rem!important}.pt-2,.py-2{padding-top:.5rem!important}.pr-2,.px-2{padding-right:.5rem!important}.pb-2,.py-2{padding-bottom:.5rem!important}.pl-2,.px-2{padding-left:.5rem!important}.p-3{padding:1rem!important}.pt-3,.py-3{padding-top:1rem!important}.pr-3,.px-3{padding-right:1rem!important}.pb-3,.py-3{padding-bottom:1rem!important}.pl-3,.px-3{padding-left:1rem!important}.p-4{padding:1.5rem!important}.pt-4,.py-4{padding-top:1.5rem!important}.pr-4,.px-4{padding-right:1.5rem!important}.pb-4,.py-4{padding-bottom:1.5rem!important}.pl-4,.px-4{padding-left:1.5rem!important}.p-5{padding:3rem!important}.pt-5,.py-5{padding-top:3rem!important}.pr-5,.px-5{padding-right:3rem!important}.pb-5,.py-5{padding-bottom:3rem!important}.pl-5,.px-5{padding-left:3rem!important}.m-auto{display:block;margin-left:auto;margin-right:auto;}
.zoom{transition: transform .5s;}
.zoom:hover{transform:scale(1.2);}
.barred {background: linear-gradient(-10deg, transparent 47%, rgba(0,0,0,0.2) 47%, rgba(0,0,0,.2) 52%, transparent 52%);}
.price-container-page{font-size:2.5rem; font-weight: 800;}

/* CARDS */
.card-asym{ border-radius: 60px 4px; max-width: 535px;}
.card-asym .card-image img{border-radius: 60px 4px;}
.card-asym .card-image .card-title{width:100%; padding: 8px 20px; }

.card-rounded{border-radius: 60px;}
.card-rounded .card-image img{border-radius: 60px 60px 0 0;}

.card-orders .detail-link{font-size:1rem;}
.card-orders .totale-articoli{font-size: 1.1rem; font-weight: 700;}
.card .top-left-label {
  position: absolute;
  width: 186px;
  height: 46px;
  top: 0px;
  left: 0px;
  border-radius: 60px 0px 24px;
  padding-top: 10px;
  font-size: 1.2rem;
  text-align: center;
}



/* BUTTONS */
.btn-loading{
  color: rgba(255,255,255,.3);
}

.btn-loading::after {
  display: block;
  content: "";
  position: relative;
  width: 22px;
  height: 22px;
  top: -29px;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: button-loading-spinner .6s  linear infinite;
}

@keyframes button-loading-spinner {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

/* ====== TABS ========= */
.tabs{height: 36px;}
.tabs .tab{height: 36px; line-height: 36px;}
.tabs .tab a:hover{
  background-color: #dbdbdb ;
  color: #ff5722;
  border-radius:6px 6px 0 0;
}
.tabs .tab a.active {
  background-color: #ff5722 ;
  color: #ffffff;
  border-radius:6px 6px 0 0;
  font-weight: 600;
}
.tabs .indicator {
  position: absolute;
  bottom: 0;
  height: 3px;
  background-color: #b6b6b6;
  will-change: left, right;
}
.tabs .tab a:focus, .tabs .tab a:focus.active {
  background-color: #ff5722;
  outline: none;
}

/* MODALS */
.modal{
  width: 100%;
  min-height: 100%;
  /*border-radius: 12px;*/
}




/* FORMS */
.error-text{font-size:0.8rem;} 
.character-counter{font-size:0.8rem;}
.country-dial{
  position: absolute;
  left: 0px;
  padding-left: 0;
  padding-top: 12px;
}

/* CART STYLES */
.cart-backdrop{
  position:fixed;
  top:0;
  left:0;
  z-index: 1999;
  width: 100%;
  height: 100%;
  background-color:rgba(0,0,0,.5);
}
.cart {
  position: fixed;
  top: 10px;
  right: -550px;
  background-color: rgb(255,255,255);
  width: 500px;
  height: calc(100vh - 5vh);
  overflow-y: scroll;
  z-index: 2000;
  transition: all .1s linear;
}
@media (max-width: 768px){
  .cart {
    position: fixed;
    top: 106px;
    right: -100%;
    background-color: rgb(255,255,255);
    width: 100%;
    height: calc(100vh - 100px);
    overflow-y: scroll;
    z-index: 2000;
    transition: all .1s linear;
  }
}
.card.card-cart{margin-top:0; }
.cart::-webkit-scrollbar { display: none;} /* Hide sidebar scrollbar for Chrome, Safari and Opera */
.cart {   -ms-overflow-style: none; } /* Hide sidebar scrollbar for IE and Edge */
.cart-loader-container {
  position: absolute;
  background-color: white;
  width: 104%;
  height: 100%;
  left: -24px;
  opacity: .6;
}
.cart-backdrop.show{display:block;}
.cart.show{right: 0;}
.badge.cart-badge, .badge.side-cart-badge{min-width: 24px; border-radius: 50%; font-size:.7rem;}
.badge:empty{display: none;}

.row.item{padding-bottom:10px; margin-bottom:10px; border-bottom: 1px solid #eee;}
.card-cart{margin-bottom:100px;}
.card-cart .item .price-container, .item .price-container {
  display: inline-block;
  background-color: green;
  border-radius: 8px 20px;
  padding: 5px 20px;
  color: white;
}
.currency {padding-right:6px;}

.card-cart .item .price .item_subtotal{font-size:1.4rem; font-weight: 600; text-shadow: 1px 1px 2px rgba(0,0,0,.2);}


.card-cart .item .remove{display:block; font-size:12px; margin-top: 20px; margin-bottom:137px;}
.card-cart .cart-qnt{text-align: center; padding-right:0; padding-top:3%}
.card-cart .input-field input.qnt{width: 30px; margin:auto; text-align: center; height:2rem;}
.card-cart .input-field label.qnt.active{left:auto; right:30px; top:18px;}
.card-cart .cart-totals{font-size:1.1rem;}
.card-cart .total-label{font-size: 1.2rem; font-weight: 700;}
.card-cart .iva-esclusa{font-size: 0.6rem; line-height: 0.6rem;}

.card-cart .cart-total-container .cart-not-discounted-total {
  margin: 0px 5px;
  padding: 0px 3px;
  font-size: .9rem;
  color: rgba(0, 0, 0, 0.6);
  background: linear-gradient(-10deg, transparent 47%, rgba(0,0,0,.5) 49%, rgba(0,0,0,.5) 51%, transparent 53%);
}

.card-cart .cart-quando-spedire{font-weight: 600; margin-top: 5px; padding-left: 58px;}
.card-cart .insert-order-loading-div{width: 104px;}
.cart-token{display:block; position: absolute; left:0px; top:0px; width: 24px; height: 24px; border-radius: 50%; font-size:.7rem;}

table.order-totals {max-width: 400px; margin: auto;}
table.order-totals tr {border-bottom:none; }
table.order-totals td {text-align:right; padding:3px 5px; }
table.order-totals td.numbers {min-width:130px; max-width: 200px; padding-right:30px;}

table.order-totals tr.totals td {font-size:1.2rem; font-weight: 700; padding-top:.7rem;}



/* ====== VIDEO PLAYER ======== */
.player-row{
  display:flex;
  align-items: center;
}

.video-col{
  width:67%; 
}

.playlist-col{
  width:33%; 
  min-height:100vh;
  top:0;
}

.playlist-container{
  position:absolute;
  top:0;
  right:0;
  width:33%;
}

.card-playlist{
  min-height: 100vh;
}

.course_list-scrollable {
  overflow-y: scroll;
  max-height: 60vh;
}

@media (max-width: 992px){
  .player-row{display:block;}
  .video-col, .playlist-col {
    width: 100%;
  }
  .playlist-container{
    position:relative;
    top:auto;
    right:auto;
    width:100%;
    
    margin-left:auto;
    margin-right:auto;
  }
  .card-playlist{
    min-height: none;
  }
  .course_list-scrollable {
    overflow-y: auto;
    max-height: none;
  }
}
/* ======= VIDEO PLAYER COLLAPSIBLES ========= */
.course-list .collapsible {
  border: none
}
.course-list .collapsible-header {
  border-bottom: none;
  padding:1rem 1rem .3rem 1rem;
  font-size:1.1rem;
  font-weight: 600;
}
.course-list .collapsible-body {
  border-bottom: none;
  padding:.3rem 0 .3rem 0;
  border-bottom:1px solid rgba(0,0,0,.1);
}

.course-list .collection .collection-item {
  display:flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  line-height: 1.5rem;
  padding: 9px 1rem;
  border: none;
}
.course-list .collection .collection-item.active{background-color: rgba(0,0,0,.08); color:rgb(0,0,0)}
.course-list .collection .collection-item.active:not(.completed) i{color:#2196F3}

.course-list .collection .collection-item i, .course-list .collection .collection-item span {
  display: block;
}

.course-list .collection-item i{color: rgb(158,158,158); padding-right:15px;}
.course-list .collection-item.completed i{color: rgb(0,191,40);}
.course-list .collection-item .title{flex-grow: 5; }
.course-list .collection-item .duration{width:70px;  font-size:.9rem; text-align: right; color: rgb(158,158,158);}
.course-list .collection-item .progress{position: absolute; right:15px; width: 70px; margin:0; background-color:rgba(0,0,0,.1);}
.course-list .collection-item .progress div{height: 100%; width:0; background-color:#2196F3;}

.course-list .collection-item .progress.completed div{background-color:#ff5722;}

/* HOVER */
.course-list .collection .collection-item:hover {
  cursor: pointer;
  background-color: rgba(0,0,0,.06);
}
.course-list .collection .collection-item:hover i{color:#2196F3}




/* ======= BULR ANIMATION ======== */

.blur-in {
  animation: blur-in 4s ease 0s;
  -webkit-animation: blur-in 4s ease 0s;
  -moz-animation: blur-in 4s ease 0s;
}

@keyframes blur-in {
  0% {
    opacity:0;
    filter: blur(50px);
    -webkit-filter: blur(50px);
    -moz-filter: blur(50px);
    -o-filter: blur(50px);
    -ms-filter: blur(50px);
  }
  90% {
    opacity:1;
    filter: blur(0px);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
  }
  100%{}

}

/* ======= BOUNCE ANIMATION ======== */
.fall-down{ 
  opacity:1;
  animation: fall 5s  linear;
  transform-origin:bottom;
}
@keyframes fall {
  0% {
    transform: translateY(-600px);
    opacity:0;
  }
  66% {
    background-color: black;
    transform: translateY(-600px);
    opacity:0;
  }
  70% {
    background-color: black;
    transform: translateY(0px);
    opacity:0.5;
  }
  71% {
    transform: translateY(0px) rotateX(20deg);
    opacity:1;
  }
  75% {
    transform: translateY(0px);
    opacity:1;
  }
  100% {
    transform: translateY(0px);
    opacity:1;
  }
}

/* ======= ROLL-IN ANIMATION ======== */
.slide-in-elliptic-top-fwd {
	-webkit-animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s both;
	        animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s both;
}
@-webkit-keyframes slide-in-elliptic-top-fwd {
  0% {
    -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
            transform: translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
            transform-origin: 50% 1400px;
    opacity: 1;
  }
}
@keyframes slide-in-elliptic-top-fwd {
  0% {
    -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
            transform: translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
            transform-origin: 50% 1400px;
    opacity: 1;
  }
}




/* CARD LAVAGNA POST-IT */
.card-board {
  border-radius: 12px;
  background: radial-gradient(circle at 30% 0%, #555, #333);
  margin-bottom:3rem;
}
.card-board::after {
  height: 120px;
  content: "";
  position: absolute;
  /* top: 50%; */
  left: 5%;
  right: 5%;
  bottom: 0;
  background: rgba(0,0,0,.3);
  transform: translate(0, 73%) scale(103%, 13%);
  transform-origin: center center;
  z-index: -1;
  filter: blur(38px);
  -webkit-filter: blur(38px);
  -moz-filter: blur(38px);
  -o-filter: blur(38px);
  -ms-filter: blur(38px);
}

.card-board .col{border-top:1px solid rgba(255,255,255,.1)}

.card-board .card-header{
  /*background-color: rgba(255,255,255,.05);*/
  border-radius: 12px 12px 0 0;
  padding: 0 10px 15px 0;
}
.card-board .card-header h5{
  margin: 0;
  font-weight: 700;
  /* color: rgb(120,110,120); */
  text-shadow: 3px 4px 1px rgba(0,0,0,.3);}
.card-board .card-header h5 i.material-icons {
  font-size: 2.6rem;
  position: relative;
  /* left: -10px; */
  top: 10px;
  margin-right: 10px;
}

/* CARD LAVAGNA BIANCA */
.card-board.white {
  background: radial-gradient(circle at 30% 0%, #FFF, #DDD);
}

.card-board.white .card-header{ /* UNUSED */
  /*background-color: rgba(255,255,255,.05);*/
  border-radius: 12px 12px 0 0;
  padding: 0 10px 15px 0;
}
.card-board.white .card-header h5{
  text-shadow: 2px 2px 1px rgba(255,255,255,.9);}




/* PRODUCT PAGE CLASSES */

/*titolo nero con sottotitolo arancio*/
.black-orange-title{font-size:2.5rem; font-weight: 800;}
.black-orange-title small{display:block; line-height: 1.6rem; font-size:1.4rem; font-weight: 500;}

/* checklist con spunta a sinistra */
ul.promo-list li{padding: 10px 0 10px 0;}
ul.promo-list li i{position:absolute; font-size:4rem;}
ul.promo-list li span{display: block; margin-left:5rem;}
ul.promo-list li .promo-list-header{font-size:1.4rem; font-weight: 600;}
ul.promo-list li .promo-list-body{font-size:.8rem;}

/* VIDEO PLAYER DIV */
.player{border-radius:6px; background-color: transparent; overflow: hidden;} /* used public site */

/* test con logo
.video-js .vjs-big-play-button{background-color: rgba(255, 87, 34, 1); border:0.1em outset #fff}
.video-js:hover .vjs-big-play-button{background-color: rgba(255, 87, 34, .8);}
*/
.video-js .video-bar-logo {
  width: 200px;
  background: url(/images/assets/video-bar-logo.png) center center no-repeat;
}



.video-js {
  font-size: 15px;
  color: #fff;
}

.video-js .vjs-big-play-button {
  font-size: 3em;
  line-height: 2em;
  height: 2em;
  width: 2em;
  border: 0em solid #fff;
  border-radius: 1.5em;
  left: 50%;
  top: 50%;
  margin-left: -1em;
  margin-top: -1em;
}

.video-js .vjs-control-bar,
.video-js .vjs-big-play-button,
.video-js .vjs-menu-button .vjs-menu-content {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.4);
}

.video-js .vjs-slider {
  background-color: #666666;
  background-color: rgba(102, 102, 102, 0.5);
}

.video-js .vjs-volume-level,
.video-js .vjs-play-progress,
.video-js .vjs-slider-bar {
  background: #fff;
}


.video-js .vjs-load-progress {
  background: #a6a6a6;
  background: rgba(102, 102, 102, 0.5);
}

.video-js .vjs-load-progress div {
  background: #e6e6e6;
  background: rgba(102, 102, 102, 0.75);
}