.yellow{
    color: #ffc72c
}
.grey{
    color: #333f48
}
.green{
    color: #006f62
}
.red{
    color: #9d2235
}
.azur{
    color: #48a9c5
}
.black{
    color: #212322
}
.white{
    color: #dbe2e9
}
.lightGrey{
    color:#c8c9c7
}
body {
  padding-top: 56px;
}
#logo-header-container{
  max-width:200px;
}

.bg-yellow{
    background-color:#ffc72c;
}
.bg-grey{
    background-color:#333f48;
}
.bg-green{
    background-color: #006f62
}
.bg-red{
    background-color: #9d2235
}
.bg-azur{
    background-color: #48a9c5
}
.bg-black{
    background-color: #212322
}

.btn-yellow{
    background-color:#ffc72c;
    border-color:#ffc72c;
    color:#dbe2e9;
    font-weight:600;
}
.btn-grey{
    background-color:#333f48;
    border-color:#333f48;
    color:#dbe2e9;
    font-weight:600;
}
.btn-green{
    background-color: #006f62;
    border-color:#006f62;
    color:#dbe2e9;
    font-weight:600;
}
.btn-red{
    background-color: #9d2235;
    border-color:#9d2235;
    color:#dbe2e9;
    font-weight:600;
}
.btn-azur{
    background-color: #48a9c5;
    border-color:#48a9c5;
    color:#dbe2e9;
    font-weight:600;
}
.btn-black{
    background-color: #212322;
    border-color:#212322;
    color:#dbe2e9;
    font-weight:600;
}


html, html body{
	font-family: 'Roboto Slab', serif;
	font-size:18px;
	font-weight:300;
}
h1, h2, h3, h4, h5{
	font-family: 'Oswald', sans-serif;
}
b, strong{
    font-weight:700;
}
.textIntro{
    background:#333f48;
    color:#dbe2e9
}
.jumbotron {
  padding: 5rem 1rem;
  margin-bottom: 2rem;
  background-color: #c8c9c7;
  background-image:url('https://marmialberti.it/wp-content/uploads/2021/04/cover-magazzino.jpg');
  background-position: center center;
  background-size:cover;
  background-repeat: no-repeat;
  border-radius: 0;
  color:#fff;
}
.btn-primary {
    color: #fff;
    background-color: #333f48;
    border-color: #333f48;
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active {
  color: #333f48;
  background-color: #ffc72c;
  border-color: #ffc72c;
}
.btn-secondary {
    color: #3a3a3a;
    background-color: #ffc72c;
    border-color: #ffc72c;
}
.btn-secondary:hover,.btn-secondary:focus,.btn-secondary:active {
  color: #ffffff;
  background-color: #333f48;
  border-color: #ffc72c;
}
/* off canvas */

.offcanvas-active{
	overflow:hidden;
}

.screen-overlay {
  width:0%;
  height: 100%;
  z-index: 30;
  position: fixed;
  top: 0;
  left: 0;
  opacity:0;
  visibility:hidden;
  background-color: rgba(34, 34, 34, 0.9);
  transition:opacity .2s linear, visibility .1s, width 1s ease-in;
   }
.screen-overlay.show {
    transition:opacity .5s ease, width 0s;
    opacity:1;
    width:100%;
    visibility:visible;
}

.offcanvas{
	width:350px;
	visibility: hidden;
	transform:translateX(-100%);
	transition:all .2s;
  border-radius:0; 
  box-shadow: 0 5px 10px rgba(0,0,0, .2);
	display:block;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 1200;
  background-color: #fff;
  overflow-y: scroll;
  overflow-x: hidden;
}

.offcanvas.offcanvas-right {
   right: 0;
   left: auto;
   transform: translateX(100%); 
 }

.offcanvas.show{
	visibility: visible;
    transform: translateX(0);
    transition: transform .2s;
}

.offcanvas .btn-close{ position: absolute; right:15px; top:15px; }

  /* ./offcanvas */

  .modalBlocco .modal-title{
    color:#fff !important;
  }

  .modalBlocco .close {
    color: #fff;
    text-shadow: none;
}
.btn-scheda{
  width:21px;
  height:21px;
}
.card-footer {
  padding: 0.5rem 0;
  background: none;
  border-top: none;
}
.card{
  border:none;
}
.card-body{
  color:#fff;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.card-img-bg{
  height:25rem;
  background-repeat: no-repeat;
  background-size:cover;
  background-position:center center;
}
.card-img-bg.bgH-25{
  height:25rem;
}
.card-img-bg.bgH-17{
  height:17rem;
}
.card-img-bg.bgH-10{
  height:10rem;
}
.bloccoAshtag{
  font-style: italic;
  color:#ffc72c;
  font-size: .9rem;;
}
h4, .h4 {
  font-size: 1.2rem;
}
#megaTitle{
    text-align: center;
    width: 50%;
    margin: 0 auto;
    font-weight: 600;
    font-size: 2.3rem;
    color: #333f48;
    font-family: 'Oswald', sans-serif;
}
.myTitle{
    font-weight:600;
    text-transform: uppercase;
}

.myBtnImg{
    margin-bottom:3rem;
    padding:1rem 2rem;
}
.myLinks{
    background-color:#333f48;
    color:#dbe2e9;
    width:100%;
    text-align:center;
padding-top:5rem;
padding-bottom:2rem;
font-size: 1.2rem;
    letter-spacing: .3rem;
    font-weight: 600;
}
ul#lang{
  list-style-type: none;
  
}
ul#lang li {
display:inline-block;
}
ul#lang li a{
  display:block;
  text-align:center;
  padding:3px 11px;
  background:#fff;
  border:solid 1px #333f48;
  color:#333;
  transition: all .3s;
  font-size:.8rem;
  border-radius: 5px;
}
ul#lang li a:hover{
  text-decoration: none;
  background:#333f48;
  color:#fff
}
.navbar-nav .nav-link{
  background: #ffc72c;
  padding: 3px 7px;
  color: #333f48;
  text-transform: uppercase;
  display: initial;
  border-radius: 3px;
}

@media only screen and (max-width: 600px) {
  #megaTitle{
    font-size: 1.2rem;
    width:30%;
    }
}