/* -----------------------------------  large screen -------------- */ 
@media (min-width: 1741px) {
    #container {
        width: 90%;
	    margin:0 auto;
    }
}

/* --------------------------------------  standard screen -------------- */ 
@media (max-width: 1740px) {
    #container {
        width: calc(100% - 40px);
        margin:0 20px;
    }
    /* --------------  logo & lang -------------- */ 
   
    #header .logo-saver a.logo img {
        top: -20px;
        width: 180px;
        height: auto;
    }
    #header nav {
        position: relative;
        margin-top:-20px;
    }
    #language a{
        font-size: 12px;
        padding: 5px 10px;
        width: 115px;
    }
    /* --------------  main menu -------------- */     
    ul.sdt_menu li a span span.sdt_link {
        font-size: 20px;
    }
    ul.sdt_menu li div.sdt_box2 span.title {
        font-size: 20px;
    }
    ul.sdt_menu li div.sdt_box a {
        font-size: 20px;
        padding: 10px;
    }
    ul.sdt_menu li div.sdt_box span.subtitle {
        font-size: 10px;
    }
    ul.sdt_menu li div.sdt_box img {
        margin-right: 10px;
    }
    /* --------------  menu prodotti -------------- */ 
    #center-top {
        height: 232px;
    }
    ul.sdp_menu li span span.sdp_link {
        font-size: 20px;
    }
    ul.sdp_menu li span span.sdp_descr {
        font-size: 10px;
    }
}   

/* --------------------------------------  medium screen -------------- */ 
@media (max-width: 1250px) {
    #container {
        width: calc(100% - 20px);
        margin:0 10px;
    }
    /* --------------  logo & lang -------------- */ 
    #header .logo-saver a.logo img {
        left: 1%;
    }
    /* --------------  main menu -------------- */ 
    ul.sdt_menu li div.sdt_box img {
        width: 30%;
    }
    ul.sdt_menu li div.sdt_box .box-flex{
        flex-wrap: wrap;
    }
    ul.sdt_menu li div.sdt_box a{
        flex: 0 0 calc(50% - 10px);
    }
    /* --------------  menu prodotti -------------- */
    #center-top {
        height: 470px;
    }
    ul.sdp_menu li.up {
        width: calc(33.33% - 4px);
    }
    ul.sdp_menu li.down {
        width: calc(33.33% - 4px);
    }
    ul.sdp_menu li.down a img {
        z-index: 301;
    }
    ul.sdp_menu li.down span.sdp_wrap {
        height: 336px;
        z-index: 300;
        background-color: #f6f5f2;
        border-left-color: #ecebe8;
    }
    ul.sdp_menu li.mobile{
        display: block;
    }
    ul.sdp_menu li span span.sdp_link {
        font-size: 20px;
    }
    ul.sdp_menu li span span.sdp_descr {
        font-size: 10px;
    }
    /* --------------  center box -------------- */    
    .box-center2 {
        flex: 0 0 calc(50% - 8px);
     }
     /* --------------  text -------------- */ 
    
    .text-center .column3 {
        columns: 2;
    }
    .text-center .column4 {
        columns: 3;
    }
    .text-center .table01 li ul{
        width: calc(50% - 20px);
    }
    .text-center h2, .text-center h3 {
        width: 75%;
        margin-right:25%;
    }
}
/* -------------------------------------- medium-small screen-------------- */ 
@media (max-width: 1050px) {
    /* --------------  logo & lang -------------- */ 
    #header .logo-saver {
        width: calc(20% - 4px);
    } 
    #language {
        display: none;
    }
    #header .logo-saver a.logo img {
        top: 3px;
        width: 120px;
        left: 5%;
    }
    #header nav {
        position: relative;
        margin-top:-30px;
    }
    #language-mobile{
        display: block;
    }
    /* --------------  main slider -------------- */ 
    .slider, .slider > div {
        height: 400px;
    }
    .slider > div h2{
        font-size: 70px;
    }
    .slider > div h2 span{
        font-size: 16px;
    }
    /* --------------  main menu -------------- */ 
    #sdt_menu{
        width: 80%;
    }
    ul.sdt_menu li div.sdt_box img {
        width: 30%;
    }
    ul.sdt_menu li div.sdt_box a{
        flex: 0 0 calc(50% - 10px);
    }
    ul.sdt_menu li div.sdt_box2 .left{
        flex: 0 0 calc(100% - 10px);
        display: flex;
        flex-wrap: wrap;
    }
    ul.sdt_menu li div.sdt_box2 .right{
        flex: 0 0 100%;
    }
    ul.sdt_menu li div.sdt_box2 .left a {
        flex: 0 0 calc(50% - 10px);
    }
    ul.sdt_menu li div.sdt_box2 .left a.uptitle, ul.sdt_menu li div.sdt_box2 .left a.uptitle span {
        flex: 0 0 calc(100% - 10px);
    }
    /* --------------  footer menu -------------- */ 
    .logo-footer {
        width: calc(100% - 4px);
     }
     ul.sdf_menu {
        display: none;
    }
    /* --------------  text -------------- */ 
    .text-center .column0 {
        width: 100%;
    }
    .text-center .column2 {
        columns: 1;
        text-align: left;
    }
    .text-center .column3 {
        columns: 1;
        text-align: left;
    }
    .text-center .column4 {
        columns: 2;
        text-align: left;
    }
    .text-center h2 {
        width: 100%;
        margin-right:0;
    }
    .text-center h3 {
        width: 100%;
        margin-right:0;
    }
    .text-center .contatti li, .text-center .mappe li{
        flex: 0 0 calc(100% - 20px);
    }
    .flex-content{
        flex:0 0 calc(50% - 20px);
    }
}
/* --------------------------------------  small screen -------------- */ 
@media (max-width: 700px) {
    #container {
        width: 100%;
        margin:0;
    }
    /* --------------  logo & lang -------------- */ 
    #header {
        height: 130px;
    }
    #header .logo-saver {
        width: calc(100% - 4px);
        height: 124px;
        clip-path: unset;
    } 
    #header .logo-saver a.logo img {
        display: none;
    }
    #language-mobile {
        width: auto;
        left:140px;
        bottom:28px;
    }
    #language-mobile select {
        font-size: 17px;
        padding: 4px 20px 4px 10px;
    }
    /* --------------  main menu -------------- */ 
    #sdt_menu{
        display: none;
    }
    #myTopnav{
        display: block;
        width: 100%;
    }
    /* --------------  menu -------------- */ 
    #center-top{
        display: none;
    }
    #center-down{
        display: none;
    }
    #footer {
        margin-top: 6px;
    }
    /* --------------  main slider -------------- */ 
    .slider, .slider > div {
        height: 350px;
    }
    .slider > div h2{
        font-size: 60px;
    }
    .slider > div h2 span{
        font-size: 16px;
    }
    #button-group.mobile-only{
        display: flex;
    }
    /* --------------  text -------------- */ 
    .flex-content{
        flex:0 0 calc(100% - 20px);
    }
    .box-center2 {
        flex: 0 0 calc(100% - 8px);
        border-left: solid 20px #ffd101;
        border-top: none;
    }
    #button-group {
        width: calc(100% - 4px);
        margin: 6px 2px -6px 2px;
    }
    #button-group a{
        flex: 0 0 50%;
        padding: 18px 20px;
        margin-top: 1px;
    }
    .text-center .gallery a {
        flex: 0 0 calc(25% - 4px);
    }
    .text-center .pictures figure img {
        height: 240px;
    }
    /* --------------  timeline -------------- */
    .timeline ul:before{
        left: calc(100% - 3px);
    }
    .timeline li{
        flex: 0 0 calc(100% - 40px);
        border-left: solid 20px #ffd101;
        border-right: none;
        text-align: right;
        margin: 10px 40px 10px 0;
    }
    .timeline li:before{
        border-width: 25px 0 25px 50px;
        border-color: transparent transparent transparent #eeedec;
        top: 13px;
        right: -30px;
        bottom: unset;
        left: unset;
    }
    .timeline li:after{
        bottom: unset;
        left: unset;
        top: 25px;
        right: -52px;
    }
    .timeline li .timetext {
        order: 1;
    }
    .timeline li:first-child{
        margin: 0 0 40px;
        flex: 0 0 calc(100% + 4px);
        border-left: none;
    }
    .timeline li:first-child:after{
        left: calc(100% - 16px);
        top:unset;
    }
    .timeline .dots:before{
        left: calc(100% - 3px);
    }
}

/* --------------------------------------  mobile screen -------------- */ 
@media (max-width: 480px) {
    #container {
        width: 100%;
        margin:0;
    }
    /* --------------  main menu -------------- */ 
    #header {
        height: 98px;
    }
    #header .logo-saver {
        height: 90px;
    }
    .topnav a.icon {
        font-size: 16px;
    }
    .topnav a img {
        height: 80px;
        margin-top: 9px;
    }
    #language-mobile {
        left: 87px;
        bottom: 13px;
    }
    #language-mobile select {
        font-size: 10px;
    }
    /* --------------  main slider -------------- */ 
    .slider, .slider > div {
        height: 200px;
        background-position: 90% center;
    }
    .slider > div h2{
        font-size: 30px;
    }
    .slider > div h2 span{
        font-size: 12px;
    }
    #saver-slider, #saver-slider1, #saver-slider2 {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
    }
    #saver-slider2 .title-contact, 
    #saver-slider2 .title-technology, 
    #saver-slider2 .title-policy,
    #saver-slider2 .title-wet, 
    #saver-slider2 .title-dry,
    #saver-slider2 .title-railway,
    #saver-slider2 .title-insulator,
    #saver-slider2 .title-saver,
    #saver-slider2 .title-knowhow,
    #saver-slider2 .title-mission,
    #saver-slider2 .title-resinsheet,
    #saver-slider2 .title-timeline,
    #saver-slider2 .title-alumen,
    #saver-slider2 .title-durobearing,
    #saver-slider2 .title-ring,
    #saver-slider2 .title-tubes,
    #saver-slider2 .title-certifications,
    #saver-slider2 .title-reference,
    #saver-slider2 .title-bandaging,
    #saver-slider2 .title-bushing {
        height: auto;
        min-height: 80px;
        padding-bottom: 8px;
        background-position: 85% top;
    }
    #saver-slider2 h1 {
        font-size: 29px;
        padding: 16px 16px;
        width: 70%;
        line-height: 0.9;
    }
    ul.breadcrumb {
        padding: 8px 16px 0;
        margin-bottom: -10px;
        list-style: none;
    }
    ul.breadcrumb li {
        font-size: 12px;
    }
    ul.breadcrumb li+li:before {
        padding: 2px;
    }
    /* --------------  center top -------------- */
    #button-group {
        margin: 4px 2px -6px 2px;
    }
    #button-group a {
        border-left: solid 8px #ecebe8;
        padding: 8px 12px;
        font-size: 13px;
        /*white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;*/
        clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
    }
    #button-group a:hover, #button-group a.active {
        border-left: solid 8px #ffd101;
    }
    /* --------------  text center -------------- */
    #center-text {
        margin-top: 4px;
        min-height: calc(100vh - 284px);
    }
    .text-center {
        padding: 8px;
    }
    .text-center .gallery a {
        flex: 0 0 calc(33.33% - 4px);
        height: 110px;
    }
    .box-center {
        padding: 16px 8px;
        margin-top: 8px;
        border-left: solid 8px #ffd101;
    }
    .box-center1 {
        padding: 8px;
    }
    .box-center1 .big-image img {
        border-left: solid 8px #00345f;
    }
    .flex-content {
        flex: 0 0 calc(100% - 8px);
        margin: 4px;
        border-top: none;
    }
    .box-center2 {
        margin: 2px;
        padding: 8px 8px 40px 8px;
        flex: 0 0 calc(100% - 4px);
        border-left: solid 8px #ffd101;
    }
    .text-center h1 {
        font-size: 24px;
        padding: 0;
    }
    .text-center h2 {
        font-size: 23px;
        padding-bottom: 2px;
        width: 100%;
        margin-right:0;
    }
    .text-center h3 {
        font-size: 19px;
        padding-bottom: 8px;
    }
    .text-center .text-big{
        font-size: 2em;
    }
    .text-center p {
        font-size: 12px;
        padding: 4px 0 8px 0;
    }
    .text-center li {
        font-size: 12px;
        margin: 0px 0 4px 16px;
    }
    .text-center .button {
        padding: 4px 40px 4px 8px;
        font-size: 12px;
        margin-bottom: 4px;
        border-left: solid 8px #ffd101;
    }
    .text-center .table01 span {
        width: 35%;
    }
    .text-center .table01 li ul {
        width: calc(65% - 20px);
    }
    .text-center .pictures figure img {
        height: 140px;
    }
    .text-center .pictures figure img.wide{
        height: 120px;
    }
    .text-center .pictures figure figcaption {
        display: none;
    }
    /* --------------  mission -------------- */
    .text-center .mission li {
        margin: 0;
    }
    .text-center .mission li h3 {
        flex: 0 0 100%;
        padding: 16px;
        text-align: center;
        font-size: 20px;
    }
    .text-center .mission li h4 {
        flex: 0 0 100%;
        padding: 8px;
        text-align: center;
        font-size: 16px;
        border-left: none;
        border-top: solid 8px #F6C801;
    }
    .text-center .mission li h4::after {
        border-width: 0 15px 15px 15px;
        border-color: transparent transparent #F6C801 transparent;
        left: calc(50% - 15px);
        top: -15px;
    }
    /* --------------  contatti -------------- */
    .text-center .contatti li {
        padding: 16px;
        font-size: 12px;
        margin: 8px;
        border-left: solid 8px #ffd101;
    }
    .text-center .contatti li span{
        font-size: 0.8em;
    }
    .text-center .mappe li {
        font-size: 12px;
        margin: 10px;
        border-top: solid 8px #ffd101;
    }
    .text-center .details {
        padding: 0 8px;
    }
    /* --------------  timeline -------------- */
    .timeline {
       margin-top:8px;
       margin-bottom: 16px;
    }
    .timeline .timetext span {
        font-size: 2.5em;
    }
    .timeline .timetext {
        padding: 16px;
    }
    .timeline li {
        border-left: solid 8px #ffd101;
        margin: 8px 0;
    }
    .timeline li:first-child {
        border-top: solid 8px #ffd101;
        margin: 0 0 8px;
    }
    .timeline li:nth-child(even) {
        border-left: solid 8px #ffd101;
    }
    /* --------------  footer -------------- */
    #footer {
        margin: 4px 0 8px 0;
        height: auto;
    }
    .logo-footer {
        height: auto;
    }
    .footer-info {
        padding: 16px;
    }
    .footer-info h1 {
        font-size: 20px;
    }
    .footer-info p {
        font-size: 11px;
    }
    .footer-info img {
        padding:0 0 8px 8px;
        width: 60px;
        height: auto;
    }
}