#col1, #col2, #col3 {text-align: center;float:left;width:33%;font-size: 0.8em !important;}
#icon-a {background-color:#88aa00;width:75px;text-align:center;height:100px;}
#icon-b {background-color:#d45500;width:75px;text-align:center;height:100px;}
#icon-c {background-color:#5fbcd3;width:75px;text-align:center;height:100px;}
#icon-a, #icon-b,#icon-c {margin: 0 10px 10% 4%;float:left;font-size:4em;padding:2%;color:white;-webkit-border-radius: 90px 0 90px 90px;border-radius: 90px 0 90px 90px;}
.secondstep #col1 h3::first-letter {color:#88aa00;}
.secondstep #col2 h3::first-letter {color:#d45500;}
.secondstep #col3 h3::first-letter {color:#5fbcd3;}
.secondstep h3 {font-family: 'Alef', sans-serif;font-size:200%;}
.secondstep, .secondstep-left {float:left;padding:7% 7% 7% 7%;background-color:white; color:gray;width:100%;}
.secondstep-left h3, .secondstep h3 {text-transform:capitalize;}
.secondstep-left h1, .secondstep h1 {width:100%; text-align:center;}

.wrapper {background-color:unset!important;margin: 0;
    position: relative;
    transition: margin 0.3s ease-out 0s;}
#newhome {position:relative;overflow:hidden;z-index:1;background: #5fbcd3;float:left;width:100%; min-height:380px;height:44em;}
#newhome::before {
background-image:url("https://www.menudigitale.eu/media/wysiwyg/menudigitale/sf-menudigitale-top.jpg"); 
background-size: cover;
    content: "";
    width: 100%;
    height: 44em;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    background-position-x: 80%;
    background-position-y: 0;
background-repeat: no-repeat;
filter: brightness(0.5);
}

#totem {float:left;position: absolute; left: 5%; top: 8%; width: 30%; height: auto;}
#totem img{padding: 0 0 0 0;width: 100%; max-width:360px; height: auto;}
#secondstep {
    background-color:white;
    float:left;
    heigth:35%;
    width:100%; 
    }
#secondstep img {margin:auto;width:50%; heigth:auto;}

#titoletto {position: relative;text-align: left; right:7%; padding-top: 7em;font-size: x-large;float:right; width:50%;}
#titoletto p {color: #ffffff;}
#titoletto p::first-letter{color:yellow;}
#titoletto span  {background-color:#666666;letter-spacing: 5px;} 
.main-container {padding:0;/*font-family: 'Alef', sans-serif;*/}

#corpotesto{font-size:1.0em;text-align:center;}
#col{margin-top:7%;}

.secondstep-left {position:relative;overflow:hidden;transform: rotate(0deg);background-color:transparent;background-image: url("https://www.menudigitale.eu/media/wysiwyg/menudigitale/smartmenu.gif"); background-repeat: no-repeat;z-index:1;background-color:#5fbcd3;}

#banner2 li {list-style:disc;margin-left:20px;}
#banner2 p {margin-bottom:0px;}
#banner2 span {color:#666;}
#banner2 h1 span {background-color:#fff;color:#5fbcd3;padding: 10px;
    border-radius: 90px 0 90px 90px;}
#banner2 { color:white;z-index:1;text-align: center;position:relative;overflow:hidden;padding:7% 25%;width:100%;float:left;background-color:#000;}
#banner2::before {background-image: url"wysiwyg/menudigitale/tablet-menu.jpeg"; background-size: cover;content: "";width: 100%; height: 100%; position: absolute; z-index: -1;top:0;left:0;filter:opacity(0.3) blur(3px);background-position: center;background-repeat: no-repeat; }

.secondstep-left::before{
  content: "";
  width: 100%;
  height: 90%;
  top: 7%;
  left: -40%;
  position: absolute;
  z-index: -2;
  background: white;
  transform: rotate(-2deg);
}


@media only screen and (min-width: 981px){
.secondstep , .secondstep-left{padding: 7% 13% 7% 13%;}
.secondstep-left #corpotesto,.secondstep-left h1 {text-align:left;width: 60%;}
.secondstep-left{background-position: 100% 8%; background-size:30%;}
#banner{ height: 40%;max-height:315px; }
#totem {left:10%;}

#titoletto p {font-size: 120%;}
#titoletto {padding-top: 3em;}
.secondstep h3{font-size: 300%;}
#corpotesto {font-size:1.5em;}
}
.columns img {border: 1px solid;-webkit-box-shadow: 0 6px 8px 4px #7D7D7D;
box-shadow: 0 6px 8px 4px #7D7D7D;}

@media only screen and (max-width: 980px){
#banner{ height: 40%;max-height:315px; }
#newhome {min-height:420px;}
#banner2{padding:13% 10%;}
.col1-layout .col-main {margin-bottom: 0px;}
#trecolonne-home {padding: 7% 7%;}
.secondstep-left #corpotesto,.secondstep-left h1 {text-align:left;width: 60%;}
.secondstep-left {background-position: 95% 50%;}}
@media only screen and (min-width: 871px){}


@media only screen and (max-width: 770px){
.welcome-msg {font-size:450%;}
#banner{ height: 35%;max-height: 210px; }
#totem{width: 35%;}
#titoletto {padding-top: 4em;width:50%;}
.welcome-msg {font-size:250%;}
.secondstep {padding: 7% 5% 7% 5%;}
#col1, #col2, #col3 {text-align:center;float:left;width:33%;}
.secondstep h3,#icon-a,#icon-b,#icon-c {margin:auto; float:none; clear:both;}
.secondstep-left #corpotesto,.secondstep-left h1 {text-align:left;width: 60%;}
.secondstep-left{background-position: 115% 50%;background-size: 50% auto; }
}

@media only screen and (min-width: 771px){
#banner{ height: 35%; }
#banner{ max-height: 200px; }
.nav-primary {margin-bottom:0px!important;}
}

@media only screen and (max-width: 620px){
#titoletto {position:relative;}
#totem{width: 40%;}
#col1, #col2, #col3 {float:left;width:100%;clear:both;padding:1%;}
#banner{ max-height: 190px; }
#trecolonne-home {padding: 15% 7%;}
#trecolonne-1, #trecolonne-2 {min-width: 180px;}
.hb {font-size:20px!important;}
.text-banner {font-size:inherit !important;}
}
@media only screen and (min-width: 480px){
.main-container, .footer-container {
padding : 0px!important;
}
}
.main-container, .footer-container {
padding : 0px!important;
}
@media only screen and (max-width: 420px){
.secondstep {padding:15% 5% 7% 5%; background-size: 50%;}
#titoletto {position:absolute;padding-top: 50px;right:5px;font-size:large;}
.welcome-msg {font-size:250%;}
#banner{ max-height: 100px; }
#trecolonne-1, #trecolonne-2 {float:none;min-width: 200px;margin:auto;text-align:center;}
#trecolonne-3 {float:none;width:80%;}
}
.banner1md, .banner2md {
    float:left;
    width: 90%;
    margin: 5%;
    border: 1px solid #39c;
    border-radius: 40px;
box-shadow: 0px 10px 10px #8ea7b9;
}
#left {
          border-radius: 40px 0 0 40px;
          background-size: cover;
          float:left;
          height:300px;
          width:50%;
         
          background-position: center;
           background-position: center;
          padding:10px;
          align-items: center;
          display: flex;
}
 #right {
           border-radius: 0 40px 40px 0;
          background-size: cover;
          float:right;
          height:300px;
          width:50%;
          box-shadow: 0px 10px 10px #8ea7b9;
          background-position: center;
          padding:10px;
         align-items: center;
         display: flex;
}
.text-banner {width:100%; text-align:center;font-size:20px;}
.hb {margin: 0;
    margin-bottom: 10px;
    color: #636363;
    font-family: "Raleway","Helvetica Neue",Verdana,Arial,sans-serif;
    font-size: 31px;
    font-style: normal;
    line-height: 1.4;
    text-rendering: optimizeSpeed;
    text-transform: uppercase;
    font-weight: 900;
}
#col-01-content, #col-02-content { 
    float: left; 
    width: 100%!important; 
    padding: 0 2%; 
    min-width: 200px; 
    margin: auto; 
  }

  #col-01-content, #col-02-content { 
    float: left; 
    width: 50%; 
    padding: 0 2%; 
    min-width: 280px; 
    margin: auto; 
  }

  #col-03-content { float: left; width: 100%; }

  #trecolonne-home { 
    float: left; 
    width: 100%; 
    padding: 7% 10%; 
    background-color: #266f82; 
  }

  #trecolonne-3 { 
    float: left; 
    width: 33%; 
    margin: auto; 
  }

  #trecolonne-3 .testo { 
    padding: 0 5px; 
    color: white; 
  }

  #trecolonne-1 { 
    float: left; 
    min-width: 200px; 
    width: 22%; 
    margin: 0 0 0 10%; 
  }

  #trecolonne-2 { 
    float: right; 
    min-width: 200px; 
    width: 22%; 
    margin: 0 10% 0 0; 
  }

  #trecolonne-1 p { 
    list-style: disc; 
    padding: 1%; 
  }

  #trecolonne-2 ul li { list-style: disc; }

  #trecolonne-2 ul { padding: 0 0 0 20px; }

  #trecolonne-2 p { padding: 1%; }

  #trecolonne-3 img, #trecolonne-2 img { 
    width: 100%; 
    border-radius: 0px 0px 0px 0px; 
  }