﻿cartelli_1.contenuti {margin-bottom: 1rem}
.contenuti .path {display: none}
.contenuti ul, .contenuti ul li {list-style: none; padding: 0; margin: 0}

header .BG {display: none}
#presentazione-generale .img-protos-all-wrapper {padding: 1rem; margin: 0rem auto}
#presentazione-generale .img-protos-all-wrapper ul {display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center}
#presentazione-generale .img-protos-all-wrapper ul li {padding: 0.5rem}
#presentazione-generale .img-protos-all-wrapper .img-wrapper {max-width: 300px; border-radius: 0px; overflow: hidden;}

.text-wrapper {padding: 0.5rem; margin: 0 auto; max-width: 50rem; text-align: justify}
.video-wrapper {width: 100%; max-width: 800px; margin: 1rem auto 0}
.video-wrapper iframe {width: 100%; height: 250px; -webkit-box-sizing: border-box; box-sizing: border-box}
#company-profile .img-wrapper {width:100%; max-width: 35rem; margin: 0 auto}
#company-profile p {margin-bottom:1rem}

.slider-container {width: 100%; max-width: 800px; margin: auto; overflow: hidden;}
.slider {display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;}
.slider img {width: 100%; flex-shrink: 0; scroll-snap-align: start; object-fit: cover;}
.slider -webkit-scrollbar {width: 100px}

/* cards Categorie settore */
.cards-wrapper {padding: 1rem; margin: 0 auto:}
.card { border-radius: 0 !important;width: 100%; max-width: 350px; border-radius: 0rem; overflow: hidden; margin: 0 auto; display: flex; flex-direction:column; justify-content: space-between; align-items:center;}
.card-body {display: flex; flex-direction:column; justify-content: space-between; align-items:center; margin-top: 1rem}
#categorie-all-section .card-body .img-wrapper, #altri-prodotti-segnaletica .card-body .img-wrapper {border-radius: 0; max-width: 500px; padding: 0; margin: 0;}
.card .pittogrammi-wrapper {display: flex; flex-wrap: wrap; padding: 0 1rem; margin-top: 1rem; justify-content: center; align-items: center}
.card .pittogrammi-wrapper .icon-wrapper {padding: 0.25rem; width: unset; max-width: unset; height: unset; max-height: unset}
.card .pittogrammi-wrapper .icon-wrapper img {max-width: unset; height: unset; max-height: unset; width: 1.5rem; height: auto}
.text-wrapper {padding: 1rem; margin: 0 auto; max-width: 50rem; text-align: justify}
#categorie-all-section .card .text-wrapper {padding: 0 1rem;}
#categorie-all-section .card h4, #altri-prodotti-segnaletica .card h4{margin: 0.5rem auto;}
#categorie-all-section .card .button:hover {background-color: #333;}


/* col categorie */
#cat-identificazione {background-color: #f1f2f3}

/* cards generali */
.general-cards-wrapper {display: flex; flex-wrap: wrap; margin: 1rem auto; justify-content: center}
.general-cards-wrapper .card {max-width: 125px; padding: 0.25rem; margin: 0.5rem; -webkit-box-sizing:border-box; box-sizing:border-box; overflow: hidden; webkit-box-shadow: 0 0 1px #666; -webkit-box-shadow: 0 0 1px #666; box-shadow: 0 0 1px #666;}
.general-cards-wrapper .card:hover {-webkit-box-shadow: 0 0 2px #333333; box-shadow: 0 0 2px #333333}
#categorie-all-section .general-cards-wrapper .card .img-wrapper {max-width: 100px}

/* cards small */
#categorie-all-section .small-cards-wrapper .card .button {margin: 1rem}

/* cards big */
.big-cards-wrapper .card {max-width: 200px; padding-bottom: 0.5rem}
#categorie-all-section .big-cards-wrapper .card .img-wrapper, #altri-prodotti-segnaletica .big-cards-wrapper .card .img-wrapper {max-width: 200px}
#categorie-all-section .big-cards-wrapper, #altri-prodotti-segnaletica .big-cards-wrapper {margin-top: 0.5rem}
#materiale-wrapper .materiale-classe {margin-top: 1.5rem}
#categorie-all-section .big-cards-wrapper .card .button {margin-top: 0}

/* Responsive */
@media only screen and (min-width: 450px) {
    .video-wrapper iframe {height: 300px; padding: 0 1rem;}
	.card {margin: 1rem}
}

@media only screen and (min-width: 600px) {
    #clienti-loghi ul{display: -webkit-box;display: -ms-flexbox;display: flex; flex-wrap: wrap; max-width: 35rem;}
    #clienti-loghi ul li {margin-top: 0; padding: 1rem}
    #clienti-loghi .img-wrapper {height: 50px; width: auto}
    #clienti-loghi .img-wrapper img {height: 100%; width: auto}
    .video-wrapper iframe {height: 350px}
	#categorie-all-section header .img-wrapper, #categorie-all-section header img {content: unset}
    #settore-wrapper .cards-wrapper {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; align-items: stretch; margin: auto; margin-bottom: 1rem}
    .card {margin: 1rem; -ms-flex-item-align: stretch; align-self: stretch; max-width: 20rem}
}

@media only screen and (min-width: 768px) {
    .video-wrapper iframe {height: 440px}
}

@media only screen and (min-width: 900px) {
    header .img-wrapper {content: url(/img/Landing/Tavoli_Road/Intro_Road.png); padding: 0; width: 100%}
    header img {content: url(/img/Landing/Tavoli_Road/Intro_Road.png)}
    #presentazione-generale .img-protos-all-wrapper ul {-ms-flex-wrap: nowrap;flex-wrap: nowrap}
    #presentazione-generale .img-protos-all-wrapper .img-wrapper {max-width: 350px;}
    #why ul {padding: 2rem}
    #why ul li {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: center; align-content: center}
    #why .img-wrapper {max-width: 150px; margin: 0}
    #why .text-wrapper {-ms-flex-item-align: center;-ms-grid-row-align: center;align-self: center; text-align: left; margin: 0 0 0 1rem}
    #why .text-wrapper h3 {margin-top: 0; text-align: center;}
    #why .text-wrapper a {text-decoration: underline}
    #affiliazioni > div {max-width: 40rem; margin-left: auto; margin-right: auto}
}


@media only screen and (min-width: 1200px) {
    /*
    header .img-wrapper {display: none}
    header .BG {display: block; background-image: url(/img/Chi_Siamo/Cartelli_Segnalatori_edificio.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 25rem}*/
}